vue3+electron如何根据分辨率等比例缩放

可以使用CSS的transform属性来实现根据分辨率等比例缩放。

首先获取屏幕分辨率，可以使用Electron的screen模块：

const { screen } = require('electron');
const { width, height } = screen.getPrimaryDisplay().workAreaSize;

然后根据分辨率计算缩放比例：

const scale = Math.min(width / 1920, height / 1080);

这里假设设计稿的分辨率为1920x1080，可以根据实际情况进行调整。

最后将缩放比例应用到页面上：

body {
  transform: scale(${scale});
  transform-origin: top left;
}

这里使用了模板字符串来动态设置缩放比例，transform-origin属性用来设置缩放的起点，默认为中心点，这里设置为左上角。

完整代码示例：

const { app, BrowserWindow, screen } = require('electron');

let mainWindow = null;

function createWindow() {
  const { width, height } = screen.getPrimaryDisplay().workAreaSize;
  const scale = Math.min(width / 1920, height / 1080);

  mainWindow = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.insertCSS(`
      body {
        transform: scale(${scale});
        transform-origin: top left;
      }
    `);
  });
}

app.whenReady().then(() => {
  createWindow();
});

注意，这里使用了webContents的did-finish-load事件来确保页面加载完成后再应用样式，避免出现闪烁或错位的情况。