vue3+vite+postcss+vm实现屏幕自适应

• 方法一

1、安装 postcss-pxtorem 插件

npm install postcss-pxtorem 

2、新增postcss.config.js的文件，

 

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 20, //跟基准
      propList: ["*"],
    },
  },
};

 

&& html下写入公共样式　

 

html {
  font-size: 16px;
}
@media screen and (min-width: 375px) {
  html {
    /* 375px 作为 16px 基准，414px 宽度时正好对应 18px 的根字号大小 */
    font-size: calc(16px + 2 * (100vw - 375px) / 39);
  }
}
@media screen and (min-width: 414px) {
  html {
    /* 屏幕宽度从 414px 到 1000px，根字号大小累积增加 4px（18px-22px） */
    font-size: calc(18px + 4 * (100vw - 414px) / 586);
  }
}
@media screen and (min-width: 1000px) {
  html {
    /* 屏幕宽度从 1000px 往后每增加 100px，根字号大小就增加 0.5px */
    font-size: calc(22px + 5 * (100vw - 1000px) / 1000);
  }
}

 

• 方法二

1、安装插件

npm install postcss-px-to-viewport

2、做配置：（基于vite.config.js配置）

import postcssPxToViewport from 'postcss-px-to-viewport'

export default defineConfig({
  plugins: [vue()],
  css:{
    postcss:{
      plugins:[
        postcssPxToViewport({
          viewportWidth: 1200   //---基于1200宽度为100vw
        })
      ]
    }
  },
});

 

············就可以实现css单位写px，自动转化成vw的单位啦！！！··············  哈哈哈，Duang  【每日一小绝招】