Vue css全局自适应

最新推荐文章于 2024-09-28 12:08:31 发布

qq_39652099

最新推荐文章于 2024-09-28 12:08:31 发布

阅读量1k

点赞数 22

文章标签： vue.js css 前端 postcss

本文链接：https://blog.csdn.net/qq_39652099/article/details/139475474

版权

方案一：postcss-pxtorem插件 + rem.js

方法总体分为两步:

postcss-pxtorem插件 -》 px转换成rem
rem.js -> 根据屏幕大小重置基数改变大小

具体步骤：

安装指定版本 npm i postcss-pxtorem@5.1.1 --save-dev

插件的基本配置（根目录下新建postcss.config.js文件）

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      "rootValue": 100, // 设计稿宽度的1/3.75，代表 1rem=100px（设置100，是为了适配几年前开发的页面，对应/src/utils/rem.js）
      "propList": ["*"], // 需要做转化处理的css属性  * 就是所有属性都要转换，如`hight`、`width`、`margin`等，`*`表示全部
      // "exclude": /node_modules/i, // 这里表示不处理node_modules文件下的css；Vant组件需要转换，但是不会写exclude的正则表达式，故不设置exclude，之后测试哪个组件库有问题再将其加入exclude
    }
  }
}

rem.js（在main.js中引入rem.js -》import './rem.js' ）

// 自定义配置rem基数（UI设计稿为735px时，<html></html>的font-size为100px）

(function (doc, win) {
  var docEl = doc.documentElement,
    widthPoint = 375,
    resizeEvt =
      "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= widthPoint) {
        docEl.style.fontSize = 100 * (clientWidth / widthPoint) + "px";
      } else {
        docEl.style.fontSize = 100 * (clientWidth / widthPoint) + "px";
      }
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener("DOMContentLoaded", recalc, false);

  docEl.addEventListener(
    "touchstart",
    function (event) {
      if (event.touches.length > 1) {
        event.preventDefault();
      }
    },
    false
  );
})(document, window);

注意事项：

1	行内样式不转化
2	Vant的UI设计稿为375px
3	不想被转化的样式，单位用PX
4	rem.js可以用lib-flexible插件代替，二者用其一即可

结果：

方案二：postcss-px-to-viewport插件

具体步骤：

安装指定版本：npm install postcss-px-to-viewport --save-dev

插件的基本配置（根目录下新建postcss.config.js文件）

module.exports = {
		plugins: {
	        autoprefixer: {},
	        "postcss-px-to-viewport": {
	            viewportWidth: 375, //视口的宽度，对应的时设计稿的宽度/2，一般为750，对应iPhone6的宽度
	            viewportHeight: 667, //视口的高度，对应的是设计稿的高度（也可以不配置）
	            unitPrecision: 5, //指定‘px’转换为视口单位值的小数位数（很多时候无法整除）小数位为5位
	            viewportUnit: 'vw', //指定需要转换成的视口单位，建议使用vw(宽度)
	            selectorBlankList: ['ignore'], //指定不需要转换的类（class类名，使用ignore，在元素的class里加入ignore，则该元素里的px不会进行转化）
	            minPixelValue: 1, //小于或等于‘1px’不转换为视口单位
	            mediaQuery: false,//允许在媒体查询中转换为‘px’,使用媒体查询，再对一些东西进行配置
            	exclude: [/TabBar/]  //不需要转化的组件文件名正则，必须是正则表达式
        }
    }
}

注意事项：

vant组件兼容（viewportWidth为 750时，才需要使用以下兼容写法，因为以前的UI设计稿尺寸是750px，但vant的是375；若UI设计稿尺寸是375px，故不需要使用此兼容写法）

postcss.config.js

const path = require("path");
 
module.exports = ({ file }) => {
  const designWidth = file.includes(path.join("node_modules", "vant")) ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
        unitToConvert: "px",
        viewportWidth: designWidth,
        unitPrecision: 6,
        propList: ["*"],
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: true,
        exclude: [],
        landscape: false,
      },
    },
  };
};