postcss解决移动端适配+1px边框问题

一 vw进行移动端适配

• vw适配简介

  VW是基于Viewport视窗的长度单位，1vw = window.innerWidth/window.innerHeight*1%，如果是750设计稿，100vw = 750px，即1vw = 7.5px，我们可以根据设计稿上的px值直接转为vw值。但是这样计算不太方便，所以引入postcss-px-to-viewport插件进行转换，我们在写样式的时候直接使用px

• vw适配简介

  根目录下创建postcss.config.js，文件内容如下:

注意1: 此方案不能转换内嵌样式中的px  
注意2:  postcss-viewport-units 的话，他会修改 content 并不能很好的兼容，会出现以下警告:
        ```
        (Emitted value instead of an instance of Error) postcss-viewport-units: ... a:after' already has a 'content' property, give up to overwrite it. 
        ```
        解决办法: 如果没有版本需求，可以考虑去掉;  或者进行过滤，具体如下:
            require('postcss-viewport-units')({
                filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1,
            }),
复制代码

二 1px边框问题解决

• 边框变粗的原因

  750设计稿，相对于iphone6的屏幕宽度是375，即2倍的dpr，当在样式中写入border: 1px solid #ccc时，渲染出来的相当于1*2px的边框，所以看起来就是比设计图粗了。

• 解决办法

  前面已经引入postcss的相关插件进行移动端适配，所以这里采用postcss-write-svg插件来解决1px边框问题，代码如下

 注意: 当同时使用postcss-px-to-viewport插件进行vw方案适配时，一定要将postcss-write-svg插件放置在前面。

      在safari浏览器和低版本andriod中，border: 1px solid transparent; 属性会看不见线条，需要将transparent去掉。复制代码

转载于:https://juejin.im/post/5c99d750e51d4561cb5f8b5b