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去掉。复制代码