移动端适配方案 vw

vw与px对应关系，100vw为视窗宽度，@vw即为@px对应占多宽
        @px                                     @vw
---------------------- === ----------------------
  design-width                         100vw

移动端页面设计稿宽度：design-width

单位px转化为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);

缺点：

• 扩展性低，不易维护
• 函数需写到公用Scss/Less文件中，每个模块需导入公用的Scss/Less文件；
• 代码量增加；
• 不能转换内联样式;

推荐使用 postcss-px-to-viewport

将px单位转换为视口单位的 (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, // 转换后的精度
                        propList: ['*'],
                        viewportUnit: 'vw',
                        fontViewportUnit: 'vw',
                        selectorBlackList: [], // 需要忽略的css选择器
                        minPixelValue: 1, // 转换最小数值
                        mediaQuery: false,
                        replace: true,
                        exclude: /(\/|\\)(node_modules)(\/|\\)/,
                        landscape: true,
                        landscapeWidth: 736,
                    })
                ],
            }
        },
     },
    ...
}

配置说明