让网站屏幕适宜各种设备？戳这里！

2023-09-09 12:02:44

PC端网站在移动端打开时，由于屏幕尺寸的差异，会导致内容显示不全或排版混乱。为了解决这个问题，我们可以使用响应式设计来使网站能够自动适应不同屏幕尺寸。响应式设计通常采用媒体查询的方式来实现。媒体查询允许我们在不同的屏幕尺寸下应用不同的CSS样式。

但是，媒体查询只能改变元素的尺寸和布局，却不能改变元素的字体大小。这就意味着，我们在设计稿中使用px单位定义的字体大小，在移动端打开时可能过大或过小。为了解决这个问题，我们可以使用PostCSS-pxtorem来将设计稿的px单位转换成rem单位。rem单位相对于根元素的字体大小，因此它可以根据不同的屏幕尺寸自动调整字体大小。

安装PostCSS-pxtorem

要安装PostCSS-pxtorem，请在项目根目录下运行以下命令：

npm install postcss-pxtorem --save-dev

在项目中配置PostCSS-pxtorem

在项目根目录下创建一个名为postcss.config.js的文件，并添加以下内容：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }
  }
};

在上面的配置中，我们设置了以下选项：

rootValue：根元素的字体大小，单位为px。
unitPrecision: 转换后的rem单位的小数点后保留的位数。
propList: 需要转换的CSS属性列表。
selectorBlackList: 不需要转换的CSS选择器列表。
replace: 是否将转换后的rem单位替换原来的px单位。
mediaQuery: 是否将媒体查询中的px单位也转换成rem单位。
minPixelValue: 最小像素值，低于这个值就不会被转换。

动态改变根元素的字体大小

为了使网站能够适应不同的屏幕尺寸，我们需要动态地改变根元素的字体大小。我们可以通过在main.js中添加以下代码来实现：

if (process.env.NODE_ENV !== 'production') {
  const { promisify } = require('util');
  const fs = require('fs');
  const path = require('path');

  const readFileAsync = promisify(fs.readFile);

  readFileAsync(path.resolve(__dirname, '../package.json')).then(res => {
    const packageJson = JSON.parse(res);
    const designWidth = packageJson.designWidth;

    const doc = window.document;
    const docEl = doc.documentElement;
    constclientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = 100 * (clientWidth / designWidth) + 'px';
  });
}

在上面的代码中，我们首先获取了package.json文件中的designWidth值。designWidth值是设计稿的宽度，单位为px。然后，我们计算了当前屏幕的宽度，并根据designWidth值计算出了根元素的字体大小。最后，我们将计算出的根元素的字体大小设置到了documentElement元素的fontSize属性上。