vue2.0項目中使用postcss
需要遇到的插件：
postcss-loader
postcss-loader
SugarSS（https://github.com/postcss/sugarss）
css module工程化（https://www.cnblogs.com/xiaohuochai/p/8537959.html）
autoprefixer（)
=>主要用來處理瀏覽器的私有前綴撼泛，這個已經(jīng)是大家經(jīng)常使用的一個PostCSS插件了挠说。這里需要提出的是，如果你的項目中使用了
postcss-px-to-viewport（http://www.360doc.com/content/18/0308/15/53188426_735395418.shtml+http://www.w3cplus.com/css/vw-for-layout.html）
=>目前出視覺設(shè)計稿愿题，我們都是使用750px寬度的损俭，從上面的原理來看，那么100vw = 750px潘酗，即1vw = 7.5px杆兵。那么我們可以根據(jù)設(shè)計圖上的px值直接轉(zhuǎn)換成對應(yīng)的vw值∽卸幔看到這里琐脏，很多同學(xué)開始感到崩潰，又要計算缸兔，能不能簡便一點日裙，能不能再簡單一點，其實是可以的惰蜜，我們可以使用PostCSS的插件postcss-px-to-viewport阅签，讓我們可以直接在代碼中寫px，著作權(quán)歸作者所有蝎抽。
配置：
"postcss-px-to-viewport": {
? ? ? viewportWidth: 750,
? ? ? viewportHeight: 1334,
? ? ? unitPrecision: 5,
? ? ? viewportUnit: 'vw',
? ? ? selectorBlackList: [],
? ? ? minPixelValue: 1,
? ? ? mediaQuery: false
? ? }
postcss-write-svg（）
=>使用普通的border: 1px solid red;生成的1px線是會粗一點的，這是由于retine屏幕導(dǎo)致的路克。該插件主要用來處理移動端1px的解決方案樟结。該插件主要使用的是border-image和background配合SVG繪制的矢量圖來做1px的相關(guān)處理。（https://www.w3cplus.com/css/fix-1px-for-retina.html）
配置：
"postcss-write-svg": {
? ? ? utf8: false
? ? },
別忘了精算，有一點千萬別忘了瓢宦，記得在中添加：
1.安裝
npm i?postcss-pxtorem
2.配置項目目錄下的.postcssrc.js文件
"postcss-pxtorem": {
? ? ? rootValue: 75,
? ? ? unitPrecision: 5,
? ? ? propList: ['*'],
? ? ? selectorBlackList: [],
? ? ? replace: true,
? ? ? mediaQuery: false,
? ? ? minPixelValue: 0
? ? }
3.預(yù)覽
原本的css代碼
.helloA
? display: flex
? width: auto
? height: 40px
? padding: 0 5px
? line-height: 3.46
? -webkit-box-sizing: border-box
? box-sizing: border-box
? font-size: 16px
? color: #666
運行npm run dev預(yù)覽
._36SgQit0oYVhmLJ3fJBxU7_0?{
? ? display:?-webkit-box;
? ? display:?-ms-flexbox;
? ? display:?flex;
? ? width:?auto;
? ? height:?2.5rem;
? ? padding:?0 0.3125rem;
? ? line-height:?3.46;
? ? -webkit-box-sizing:?border-box;
? ? box-sizing:?border-box;
? ? font-size:?1rem;
? ? color:?#666;
但是有一個問題：
頁面元素大小不變，不是隨屏幕大小而變
