vue移动端适配

原创

已于 2022-07-15 15:29:22 修改 · 328 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #postcss #前端

于 2022-07-15 15:13:55 首次发布

本文介绍了如何在Vue项目中进行移动端适配，通过postcss-px-to-viewport自动将px转化为viewport单位，以及使用postcss-pxtorem转化为rem单位进行开发。针对vue3和vue2，分别在vue.config.js和vite.config.js中配置postcss，并提供了安装、main.js引入及配置文件的详细步骤。

1 · postcss-px-to-viewport将px自动转化为viewport单位

vue3 / vue2 配置文件 vue.config.js

module.exports = {
   
   
  css: {
   
   
    loaderOptions: {
   
   
      postcss: {
   
   
        plugins: [
          require("postcss-px-to-viewport")({
   
   
            unitToConvert: "px", // 要转化的单位
            viewportWidth: 750, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
            landscapeUnit: "vh", // 横屏时使用的单位
            landscapeWidth: 667, // 横屏时使用的视口宽度
            selectorBlackList: [