vw與px對應關(guān)系注服，100vw為視窗寬度嘲碧，@vw即為@px對應占多寬
????????@px?????????????????????????????????????@vw
---------------------- === ----------------------
??design-width?????????????????????????100vw

移動端頁面設計稿寬度：design-width

單位px轉(zhuǎn)化為vw

Sass

$design-width: 750px;
@function px2vw($px) {
  @return round($px / $design-width) * 100vw;
}
width: px2vw(500);

Less

@design-width: 750;
.px2vw(@name, @px) {
  @{name}: round(@px / @design-width, 2) * 100vw;
}
.px2vw(width, 500);

缺點：

• 擴展性低祷肯，不易維護
• 函數(shù)需寫到公用Scss/Less文件中降淮，每個模塊需導入公用的Scss/Less文件摹恰；
• 代碼量增加丐重；
• 不能轉(zhuǎn)換內(nèi)聯(lián)樣式;

推薦使用 postcss-px-to-viewport

將px單位轉(zhuǎn)換為視口單位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.

$ npm install postcss-px-to-viewport --save-dev

已vue-cli為例，在vue.config.js文件中添加

module.exports = {
    ...
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require("postcss-px-to-viewport")({
                        unitToConvert: 'px',
                        viewportWidth: 414, // 設計稿寬度
                        unitPrecision: 3, // 轉(zhuǎn)換后的精度
                        propList: ['*'],
                        viewportUnit: 'vw',
                        fontViewportUnit: 'vw',
                        selectorBlackList: [], // 需要忽略的css選擇器
                        minPixelValue: 1, // 轉(zhuǎn)換最小數(shù)值
                        mediaQuery: false,
                        replace: true,
                        exclude: /(\/|\\)(node_modules)(\/|\\)/,
                        landscape: true,
                        landscapeWidth: 736,
                    })
                ],
            }
        },
     },
    ...
}

配置說明