vue2.0項(xiàng)目中使用postcss
需要遇到的插件：
postcss-loader
postcss-loader
SugarSS（https://github.com/postcss/sugarss）
css module工程化（https://www.cnblogs.com/xiaohuochai/p/8537959.html）
autoprefixer（)
=>主要用來(lái)處理瀏覽器的私有前綴，這個(gè)已經(jīng)是大家經(jīng)常使用的一個(gè)PostCSS插件了。這里需要提出的是，如果你的項(xiàng)目中使用了
postcss-px-to-viewport（http://www.360doc.com/content/18/0308/15/53188426_735395418.shtml+http://www.w3cplus.com/css/vw-for-layout.html）
=>目前出視覺(jué)設(shè)計(jì)稿，我們都是使用750px寬度的，從上面的原理來(lái)看，那么100vw = 750px，即1vw = 7.5px。那么我們可以根據(jù)設(shè)計(jì)圖上的px值直接轉(zhuǎn)換成對(duì)應(yīng)的vw值。看到這里，很多同學(xué)開(kāi)始感到崩潰，又要計(jì)算，能不能簡(jiǎn)便一點(diǎn)，能不能再簡(jiǎn)單一點(diǎn)，其實(shí)是可以的，我們可以使用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線是會(huì)粗一點(diǎn)的，這是由于retine屏幕導(dǎo)致的。該插件主要用來(lái)處理移動(dòng)端1px的解決方案。該插件主要使用的是border-image和background配合SVG繪制的矢量圖來(lái)做1px的相關(guān)處理。（https://www.w3cplus.com/css/fix-1px-for-retina.html）
配置：
"postcss-write-svg": {
? ? ? utf8: false
? ? },
別忘了，有一點(diǎn)千萬(wàn)別忘了，記得在中添加：
1.安裝
npm i?postcss-pxtorem
2.配置項(xiàng)目目錄下的.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
運(yùn)行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;
但是有一個(gè)問(wèn)題：
頁(yè)面元素大小不變，不是隨屏幕大小而變
