css增强的功能

一、样式前缀的自动补齐

现代浏览器的内核及前缀：

1. IE浏览器：内核为Trident，前缀为-ms

2. 火狐浏览器：内核为Geko，前缀为-moz

3. 谷歌浏览器：内核为Webkit，前缀为-webkit

有些css3的属性在一些浏览器中并不支持，所以我们需要给这些属性加上前缀，使得浏览器兼容，但是在实际编写代码的过程中，手动的添加前缀是一件很麻烦的事情，所以我们想要使用自动添加前缀的方式。

自动添加前缀是使用autoprefix和PostCss来实现的。

在解析css的loader前加：

{   loader: "postcss-loader",   options: {      plugins: [          require("autoprefixer")({            browsers: [              "last 10 Chrome versions",              "last 5 Firefox versions",              "Safari >= 6",              "ie > 8",            ],         }),       ],
   }
}

但是这样配置，打包时会出现以下提示：

解决方法有三种：

• 将browsers改为 overrideBrowserslist。

• 在package.json中增加browserslist

• 增加.browserslistrc文件

这里我自己试了一下，没能生效，查阅资料说是browser的配置有问题。

postcss-loader是一个后置处理器，也就是在css解析完之后，才会启用。

less-loader、sass-loader等都是预处理器。

二、移动端px换成rem

之前兼容不同分辨率的设备的方法是使用媒体查询，这种方法比较麻烦，需要写多套样式，而且移动设备的尺寸也越来越多，要想兼容所有的设备是很复杂的。

px2rem-loader可以将px值转换成rem值。因为rem的值是相对于跟元素的font-size的值的，所以我们要知道在不同分辨率下，页面根元素的font-size。

可以使用手机淘宝的lib-flexible（根据设备的宽高）来计算页面的根元素的font-size。

配置：

lib-flexible在页面引入就行。

在rules的css解析配置中增加px2rem-loaderde 配置：

{   loader: "px2rem-loader",   options: { remUnit: 75, remPrecision: 8 },}

options中设置了两个参数，remUnit为rem相对于px的转换单位，这里1rem=75px，此时是比较适合750的设计稿的。

remPrecision指的是转换之后的rem值的小数点的位数，这里设置8，也就说取小数点后8位。