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去掉。複製代碼