vue cli3.x以上版本搭配vant配置postcss-pxtorem和lib-flexible

最新推荐文章于 2024-08-06 09:48:49 发布

麦兜:)

最新推荐文章于 2024-08-06 09:48:49 发布

阅读量1k

点赞数

分类专栏：前端开发文章标签： vue.js css 前端

本文链接：https://blog.csdn.net/qq_40544291/article/details/105976044

版权

前端开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1.下载包

npm install lib-flexible --save
npm install postcss-pxtorem --save-dev

2.在main.js,加入以下代码

import "lib-flexible/flexible.js";

3.在public/index.html里,删除<meta name=“viewport” …>
原因:

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem
注意：
1.检查一下html文件的head中，如果有 meta name=“viewport” 标签，需要将他注释掉，因为如果有这个标签的话，lib-flexible就会默认使用这个标签。而我们要使用 lib-flexible 自己生成的 meta name=“viewport” 来达到高清适配的效果。
2.因为 html 的 font-size 是根据屏幕宽度除以 10 计算出来的，所以我们需要设置页面的最大宽度是10rem。
3.如果每次从设计稿量出来的尺寸都手动去计算一下rem，就会导致我们效率比较慢，还有可能会计算错误，所以我们可以使用px2rem-loader自动将css中的px转成rem
（该段摘录于：https://blog.csdn.net/yanzhi_2016/article/details/80461951
）

如图:
在这里插入图片描述

4.新建vue.config.js,加入以下代码

module.exports = {
  outputDir: "dist",
  publicPath: process.env.NODE_ENV === "production" ? "/vant-demo/" : "/",
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            rootValue: 75, // 换算的基数,数值具体看你的设计稿 另外提醒下vant-UI的官方根字体大小是37.5
            selectorBlackList: [".van"], // 忽略转换正则匹配项
            propList: ["*"]
          })
        ]
      }
    }
  }
};