vue引入postcss-plugin-px2rem，px转rem

npm install --save-dev postcss-plugin-px2rem

vue.config.js

module.exports = {css: {loaderOptions: {postcss: {plugins: [require('postcss-plugin-px2rem')({rootValue: 16, //换算基数， 默认100  ，1 / fontsize(html) = x 原来的1px转为0.0625rem// unitPrecision: 5, //允许REM单位增长到的十进制数字。//propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。// propBlackList: [], //黑名单// exclude: /(node_modules)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值// selectorBlackList: [], //要忽略并保留为px的选择器// ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。// mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。// minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0//exclude: "/node_modules/",// selectorBlackList: ['html', 'mint-', 'mt-', 'mpvue-', 'calendar', 'iconfont'], //在rem.js全局作用下   排除指定的文件的影响// propBlackList: ['border']})]}}}
}

以上完成px->rem，为了某些已经以rem为单位的组件不受影响，如消息框图标，这里将rootValue设置为html默认字体大小16px（html根字体大小代表rem代表的大小，此时1rem=16px）
main.js中引入rem.js，监听窗口变化，等比例改变根fontsize达到改变rem的大小

rem.js

// 设置 rem 函数
function setRem() {let htmlWidth = document.documentElement.clientWidth// let htmlHeight = document.documentElement.clientHeight//得到html的Dom元素let htmlDom = document.getElementsByTagName('html')[0];// //设置根元素字体大小 937 / 16 = 58.5625 ， 937是谷歌1080 - 工具栏高度// htmlDom.style.fontSize = (htmlHeight / 58.5625) + 'px';//设置根元素字体大小 1920 / 16 = 120htmlDom.style.fontSize = (htmlWidth / 120) + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {setRem()
}

vue引入postcss-plugin-px2rem，px转rem相关推荐

Vue移动端项目中px转rem的两种方法
1)使用lib-flexible动态设置REM基准值(html标签的字体大小) 安装依赖 yarn add amfe-flexible// 或者npm i amfe-flexible 然后在main. ...
Vue项目中自动将px转换为rem
一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: // 基准 ...
VUE中引入插件实现px转换rem
1.使用命令行安装lib-flexible: npm install lib-flexible --save 2.引入lib-flexible: 在项目入口文件 main.js 里引入 lib-fl ...
html页面如何按需导入vant,vue脚手架中使用Vant，实现自动按需引入组件，并将px转换为rem...
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
vue2项目中实现字体自适应（使用px2rem插件将px转rem）
1.安装px2rem插件 npm add postcss-px2rem 2.配置 (1)在src下的utils目录中新建px2rem.js文件(没有utils就新建一个) px2rem.js // 基 ...
vue 使用lib-flexable，px2rem 进行移动端适配但是引入的第三方UI组件 vux 的样式缩小，解决方案...
最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...
基于vue-cli3的vue项目通过postcss-pxtorem 实现px自动转换成rem
使用postcss-pxtorem 项目中的px转换为rem,rem单位用于适配不同宽度的屏幕. 如何在vue-cli3.0中使用postcss-pxtorem 插件 1 安装依赖包 npm inst ...
移动端适配-flexible.js使用(解决对外部引入css，px2rem能不能转换rem问题)
移动端flexible.js 适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应 1.安装lib-flexible.js npm install lib- ...
vue Syntax Error Error PostCSS plugin postcss-pxtorem requires PostCSS 8
vue Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. Migration guide for end- ...
适配移动端配置px2rem（自动将px转rem）
vue配置px2rem 1.安装 npm install px2rem-loader lib-flexible –save 2.在项目入口文件main.js中引入lib-flexible import ...

vue引入postcss-plugin-px2rem，px转rem

vue引入postcss-plugin-px2rem，px转rem相关推荐

最新文章

热门文章