前端适配-px转-rem；

最近在做一个pc端的后台管理系统，项目一期一批次已开发完毕，因为一批次没有适配要求，所以大框架时没有使用rem，业务现在又提出加入低分辨率适配；

苦思冥想后决定还是百度吧，网上有很多的博客和文章，但试了很多都不能实现；经过一段时间摸索，最后总算是ok了；

此次配置使用的插件为 @moohng/postcss-px2vw

使用：npm i @moohng/postcss-px2vw --save 即可下载；

配置：项目根目录新建一个 postcss.config.js 文件；

module.exports = {plugins: {'@moohng/postcss-px2vw': {// rootValue: 100,  // 可不填写 默认先转为vm 浏览器不支持的话才会为rem (此处为参考html字号)viewportWidth: 1536,//填入设计图宽度}}
}

打包后依然没有问题；

但是：but

这个方法有一个小问题，就是无法识别行内样式

所以就找了另一个插件，可以用loader来进行解析；

插件：style-vw-loader；

下载命令 npm i style-vw-loader --save;

配置：在 vue.config.js 中进行配置即可；

module.exports = {publicPath: "./",//配置loaderchainWebpack: (config) => {config.module.rule('vue').test(/\.vue$/).use('style-vw-loader').loader('style-vw-loader').options({viewportWidth: 1536,//传参})}//配置loader
}

复制 //配置loader 里面的内容即可；

按着步骤来，复制粘贴即可；（使用的是@vue.cli3,并且 style-vw-loader 插件只支持vue）

如果需要react的可以在插件源码中进行修改；

px转vw和rem配置-vue-行内样式px转vw和rem-----项目中无需出现rem单位；相关推荐

干货来袭！CSS的行内样式与内联样式，看完就会了
什么是行内样式行内样式,其实从它的名字就可以看出来它的特点,就是直接在 HTML 标签中使用 style 属性设置 CSS 样式.例如像下面这样的: <p style="font-s ...
CSS基础外部样式表内嵌样式表行内样式表
CSS简述:css是Cascading Style Sheet的缩写,直译过来为层叠样式表或级联样式表,简称样式表.利用css样式表定义页面样式,将会大大减少设计工作量.一些好的css样式表的建立,可 ...
在vue中怎么写行内样式高_vue v-bind绑定行内样式
使用 v-bind 指令去绑定行内样式,即使用 v-bind:style 或者 :style 的方式去动态绑定行内样式. style中直接定义样式下面实例中我们将直接在 v-bind:style 属 ...
15 Vue中子组件样式的绑定和行内样式模版编写
[基础]模板样式绑定2-进阶场景子组件的样式绑定如何区分父子组件子组件使用样式的小坑行内样式的编写场景这篇文章继续学习Vue的模板样式绑定.上篇文章你已经对Vue中的样式绑定有一个基本了 ...
在vue中怎么写行内样式高_13.VUE学习之控制行内样式
vue 测试一测试二测试三 var app = new Vue({ el: "#vue", data:{ red:"red", size:28, div2: ...
【Vue框架】Vue绑定样式及案例之行内样式——对象绑定样式与数组控制样式（附带源码案例)
文章目录一.Vue样式绑定 1.1 Vue绑定class样式 1.2 Vue绑定行内样式 1.2.1 对象控制绑定样式 1.2.2 数组控制绑定样式 1.3 Vue绑定样式案例(标题排他) 1.4 ...
操作行内样式-对象语法//操作行内样式-数组语法
操作行内样式-对象语法 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
23 - JavaScript 通过style对象设置行内样式
style属性的获取和修改在DOM当中,如果想设置样式,有两种形式: className(针对内嵌样式) style(针对行内样式) 这篇文章,我们就来讲一下style. 需要注意的是:style是 ...
vue- style行内样式
style行内样式 :style="变量" :style="{color:'red',width:'100px'}" :style="[可做三元运算判 ...

px转vw和rem配置-vue-行内样式px转vw和rem-----项目中无需出现rem单位；