postcss

cnpm i postcss-px2rem -- save cnpm install px2rem -loader -- save 2 、配置px2rem build目录下vue - loader.conf.js中，做如下修改： module.exports = { loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, extract: isProduction }), transformToRequire: { video: ' src ' , source: ' src ' , img: ' src ' , image: ' xlink:href ' }, postcss:[require( ' postcss-px2rem ' )({ ' remUnit ' : 37.5 , ' baseDpr ' : 2 })] /* 因为我是以750px(iphone6)宽度为基准，所以remUnit为37.5 */ } 3 、在static目录中，建js文件夹，放flex.js: (function(win, lib) { var doc = win.document; var docEl = doc

前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代，要么自己去计算 rem 值，要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成 rem 。 技术栈 vue-cli：使用脚手架工具创建项目。 postcss-pxtorem：转换px为rem的插件。 自动设置根节点 html 的 font-size 因为 rem 单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小。 原理网上有很多文章分享，这里不具体解释。 1、创建 rem.js 文件 很多人写这种小工具文件会习惯性的加上闭包，这个其实是没有必要的。ES6中每个文件都是单独的一个模块。 // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale,

PX px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 IE无法调整那些使用px作为单位的字体大小 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。可以考虑不说 EM em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 EM特点 1. em的值并不是固定的； 2. em会继承父级元素的字体大小。 注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。 那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中 的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上 em作为单位就行了。 所以我们在写CSS的时候，需要注意两点： 1. body选择器中声明Font-size=62.5%； 2. 将你的原来的px数值除以10，然后换上em作为单位； 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 *

Vue插件与ui组件样式冲突 vuecli3.x搭建项目 安装了postcss-px2rem但是影响了ui组件的样式 1.因为postcss-px2rem不能忽略指定文件 需要安装postcss-px2rem-exclude （安装前需要先卸载postcss-px2rem，未安装postcss-px2rem直接安装postcss-px2rem-exclude ） （1）安装 （如果安装了 postcss-px2rem ，记得卸载一下 npm uninstall postcss-px2rem） // 安装插件 //如果安装了 postcss-px2rem ，卸载 npm uninstall postcss-px2rem npm install amfe - flexible -- save npm i postcss - px2rem - exclude -- save （2）main.js引入 // main.js引入 import 'amfe-flexible' 2. 在根目录下创建 postcss.config.js内修改 exclude 里是要忽略的文件 //在根目录下创建 postcss.config.js内修改 module . exports = { plugins : { autoprefixer : { } , "postcss-px2rem-exclude" :