本文目录

1. 前言
2. 场景
3. 新项目开发

前言

本文只讲最基础的套路(适配问题)，其他特殊问题特殊解决。

场景

移动端开发一般分为新项目开发和组件开发（可能是一个npm包，或者随便在一个PC工程里开发移动端页面，总之不适用rem那套方案的）;

新项目开发

新项目开发一般适合用vw计算font-size基准，用rem写页面单位(这样可以避免用js去控制):

@design-width: 375;//这里注意如果一般拿到750的设计稿，这里也写375，然后其余单位统统除以2方便在chrome中调试
@body-maxWidth: 540;//防止页面视口过大造成布局不合理的现象，再大一点比如1080，就给他整PC端去
html {
    font-size: calc(~"100vw/@{design-width} * 100")
}
body {
    max-width: ~"@{body-maxWidth}px";
}

.demo { //举个例子
    height: 1rem; //原来设计稿上是100px;
}

对于新项目开发，上文说的方式其实已经算最优解了。至于之前主流的方案lib-flexible+postcss-pxtorem的方案比较麻烦，而且lib-flexible的作者都说放弃了，改用viewport来代替此方案（github.com/amfe/lib-fl…

组件开发

因为组件不方便去更改使用该组件的项目的font-size基准，所以这里用vw的方式解决。

@design-width: 375
.pxToVW (@px, @attr: width) {
    @vw: (@px / @design-width) * 100;
    @{attr}: ~"@{vw}vw";
}

.demo { //举个例子
    .pxToVW(100, height); //原来设计稿上是100px;
}

如果嫌这样写比较麻烦，可以用postcss-px-to-viewport插件来解决。 这里以vue-cli 3.x为例：

1. 先安装插件：

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

2. 现在项目根目录下新建.postcssrc.js,内容如下：

module.exports = (params) => {
    console.log('params', params)
    // const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
    return {
        plugins: {
            autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
            "postcss-px-to-viewport": {
                unitToConvert: "px", // 要转化的单位
                viewportWidth: 375, // UI设计稿的宽度
                unitPrecision: 6, // 转换后的精度，即小数点位数
                **propList**: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
                viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
                fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
                selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
                minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
                mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
                replace: true, // 是否转换后直接更换属性值
                exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
                landscape: false // 是否处理横屏情况
            }
        }

    }
}

再运行项目即可。

总结

移动端适配套路：

1. 需要适配的场景：

如果以阅读为主的地方，比如列表可以用绝对单位(px)，如果和视觉元素耦合较多的地方则需要适配

2. 对于新开发项目，推荐使用vw + rem的方式解决：

3. 对于组件开发等不适合rem的地方，推荐使用postcss-px-to-viewport的方式解决