当前位置: 代码迷 >> 综合 >> vue自适应布局(postcss-px2rem)
  详细解决方案

vue自适应布局(postcss-px2rem)

热度:2   发布时间:2024-01-12 01:08:26.0

首先,我们来了解一下lib-flexible和amfe-flexible:
lib-flexible是淘宝项目组开发出来的一个开源插件,会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。而amfe-flexible是lib-flexible的升级版,所以现在我就只使用amfe-flexible了。
与其搭配的postcss-px2rem(pxtorem)作用为把px转变为rem
1.下载amfe-flexible: cnpm install postcss-px2rem -S
2.下载postcss-px2rem: cnpm install postcss-px2rem -S
小tip:使用yarn下载不了

未免兼容麻烦,我这里指定了版本
在这里插入图片描述
3.在main.js里引入amfe-felxible

import 'amfe-flexible'

3.在vue.config.js文件里面配置postcss

我下载的vue-cli3,配置如下

module.exports = {
css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({remUnit: 37.5})]}}}
}

vue-cli2配置则为

module.exports = {"plugins": {"postcss-import": {},"postcss-url": {},// to edit target browsers: use "browserslist" field in package.json"autoprefixer": {},"postcss-pxtorem": { // 此处为添加部分rootValue: 100, // 换算基数,默认100,把根标签的font-size规定为1rem为50px,在设计稿上量出多少px直接在代码中写多少pxunitPrecision: 5,  //保留rem小数点多少位propList: ['*', '!border', '!font-size'], //  存储将被转换的属性列表,'!font-size' 即不对字体进行rem转换selectorBlackList: ['.radius'], // 要忽略并保留为px的选择器,例如fs-xl类名,里面有关px的样式将不被转换,支持正则写法。replace: true,mediaQuery: false,//(布尔值)媒体查询( @media screen 之类的)中不生效minPixelValue: 12,///设置要替换的最小像素值,px小于12的不会被转换//propWhiteList: [],  //默认值是一个空数组,这意味着禁用白名单并启用所有属性propBlackList: ['font-size'], //黑名单}}
}

参考:https://blog.csdn.net/weixin_44388523/article/details/90445885
https://blog.csdn.net/qq_42031498/article/details/106054343
https://github.com/cuth/postcss-pxtorem
https://github.com/mrsunx/lib-flexible#readme

  相关解决方案