在使用vue init webpack構建的專案中，一開始我準備使用rem布局，以前使用rem布局，都採用的是amfe團隊發布的lib-flexible，但是在flexible的redeme的一開始 我就讀到了這麼一段話，官方指引我使用vw實現適配
依據引導，我啟用了postcss外掛程式，並且學習到了vw適配，vue構建專案的根目錄下的.postcssrc.js檔案中的配置如下（摘自
module.
exports = ,
"postcss-url"
: {},
"postcss-aspect-ratio-mini"
: {},
"postcss-write-svg"
: ,
"postcss-cssnext"
: {},
"postcss-px-to-viewport"
: ,
"postcss-viewport-units":,
"cssnano":
} }
重點來了
與文章內有所不同的是
官方給出的配置項是這樣的
"postcss-viewport-units"
:{}我寫的配置項是這樣的
"postcss-viewport-units"
:在轉化過程中我加入了過濾器，用來迴避偽類選擇器
為什麼要這麼做呢？ 舉個栗子 看下圖
注意到這個content了嗎？ 每乙個元素都帶有content屬性 我沒有寫啊
普通div有這個不要緊 但是偽類選擇器帶有這種東西 是會顯示在頁面上的，這東西怎麼來的？
看它的內容 viewport-units-buggyfill 去github搜一下
多方查詢發現 為了hack而新增content屬性的原來是下面這個（截圖來自npmjs.com）
關於postcss-viewport-units外掛程式，npm對它的描述是 自動給html元素新增content屬性（如下圖）
再來看一下這個外掛程式的readme
配置乙個過濾規則函式是不是就可以迴避這個問題了 但是這個函式怎麼寫？
在原始碼的test資料夾下 我看到了這個
寫上去後發現成功規避掉了::after，那::before呢？
請參照上文我的配置
屬性選擇器，偽類選擇器，偽元素選擇器
屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...
偽類選擇器
作用根據連線的不同狀態可以以不同的方式顯示 偽類是css 用於向某些選擇器新增特殊的效果。a標籤中有四個 link visited hover active 用法示例 a link 未訪問的連線 顏色可以自定義 a visited 已訪問的連線 hover 滑鼠移動到連線上時顯示的效果 a acti...
偽類選擇器
偽類選擇器 用來設定 某些元素在特殊情況下的屬性 例如 超連結在訪問之後的樣式，文字框獲得輸入焦點後的樣式，文字被選中後的樣式。等 1 visited 這個偽類選擇器用於 超連結。指的是 訪問之後的超連結的樣式。只能修改顏色。3 link 普通超連結的樣式 可以設定顏色 背景顏色。等等 4.hove...