上期说到使用 lib-flexible + postcss-px2rem-exclude 实现px 转 rem，但是发现实现的结果是错误的，宽度根本不够，查看各种资料了解到，现在已经不使用了，现在使用的是amfe-flexible + px2rem-loader + postcss-px2rem-exclude

一、安装

1.安装px2rem-loader amfe-flexible postcss-px2rem-exclude

npm install px2rem-loader amfe-flexible  postcss-px2rem-exclude --save

2.main.js文件中引入amfe-flexible/index.js

import 'amfe-flexible/index.js'

3.进入.postcssrc.js文件配置

module.exports = {"plugins": {"postcss-import": {},"postcss-url": {},// to edit target browsers: use "browserslist" field in package.json"autoprefixer": {},"postcss-px2rem-exclude": {remUnit: 192, // 基准数据exclude: /node_modules|mobile/i}}
}

参数说明：
remUnit：是基准数据，举例：若设计稿的宽为1920，则该数值为192

exclude：不对px进行转化的目录，举例：/node_modules|mobile/i 是node_modules下的文件和mobile目录下的文件css不进行转化；

最后

重新npm run dev，每次修改以后也要重新编译，并且要重新打开新页面。

注意

1.此方法只能将.vue文件style标签中的px转成rem，不能将script标签和元素style里面定义的px转成rem；

2.如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /* no*/就可以了。

Vue自动px单位自动转换rem相关推荐

vue 自动px单位自动转换rem
vue 自动px单位自动转换rem vue 适配移动端假设设计图是750 第一步安装 lib-flexible npm i lib-flexible --save 第二步 px2rem-loade ...
vue中将px单位转成rem
方法一: px2rem-loader + lbi-felix(这种方法可能会导致第三方UI库样式缩小): 1.首先安装需要用到的包 npm install px2rem px2rem-loader l ...
前端怎么把px单位换成rem单位解决项目页面适配问题
先看没有适配前的效果,下面是没有适配前,使用的是px单位,代码和效果如下: <!DOCTYPE html> <html><head><meta charset ...
html中rem单位的转换,rem换算(rem与px换算工具)
哪位大神,能告诉我,rem和px是怎么换算的?然后怎样用rem布局??我就. 需要自己设置,一般是1rem=14px,单位和px的布局是一样的,只是单位不同而已,所以不必纠结 px像素(Pixel). ...
vue3+vant移动端适配 px转换rem
Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 rem lib- ...
使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0
在vue-cli3.0中使用postcss-plugin-px2rem 插件插件的作用是自动将vue项目中的px转换为rem postcss-plugin-px2rem优势: 因为 postcs ...
VUE中引入插件实现px转换rem
1.使用命令行安装lib-flexible: npm install lib-flexible --save 2.引入lib-flexible: 在项目入口文件 main.js 里引入 lib-fl ...
java 文件大小单位换算_获取文件大小Byte、KB、MB、GB、TB单位自动转换
获取文件大小Byte.KB.MB.GB.TB单位自动转换下面这个是直接获取Byte(字节大小) /** * 获取文件的大小(Byte) * @param file 文件 * @return 文件的大 ...
Echarts Y轴单位自动转换
用Echarts展示交易额趋势时,发现过百万的数字显示的0太难数了,想实现Y轴的单位可以根据金额的大小自动选择单位,在网络上找了好久,做个笔记. Y轴 JS代码如下: yAxis: [{type: ' ...

Vue自动px单位自动转换rem

一、安装

最后

注意

Vue自动px单位自动转换rem相关推荐

最新文章

热门文章