面题系列：移动端适配相信你在移动端开发的时候少不了保证各种不同尺寸机型的适配。可以谈谈你对移动端适配的了解吗？还可以具体

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

题目描述

相信你在移动端开发的时候少不了保证各种不同尺寸机型的适配。可以谈谈你对移动端适配的了解吗？还可以具体说说平时是如何对移动端的适配方案吗？

考察点

物理像素、逻辑像素、设备像素比的了解。
webpack的使用
rem适配的理解
px转rem的操作
px转vw的操作

解题思路

物理像素：指的是屏幕上的显示单元，设备实际的像素点，由设备本身的屏幕决定。
逻辑像素: 是由程序控制的虚拟像素。如，前端样式里的px就是逻辑像素。
设备像素比：物理像素 / 逻辑像素。设备像素比越大，则显示的效果越清晰。
利用viewport标签来更改视口布局，变成理想视口。目的是为了 前端像素 = 物理像素／分辨率 ，如width:100%，那么就是当前手机屏幕的宽度。
```
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
```
rem：一个灵活的、可扩展的单位，由浏览器转化像素并显示。默认情况下，html的font-size大小。

由此，可以发现我只要控制html的font-size，其下的元素单位都以rem做标准，那么页面就可以自动做出适配了，即页面尺寸大，其中元素尺寸也会自动变大，页面尺寸小，其中元素尺寸也会自动变小。

rem适配代码如下：

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if(!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        };
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

这样在要是还原750px的设计稿，里面的1px就相当于0.01rem。

同时，css3中还有vw单位，意思想屏幕宽度的占比。如屏幕宽度的60%，则可以写为60vw。这个单位可以弥补早期百分比布局偏差大的问题。也可作为元素单位的换算标准。进行布局，但往往是通过webpack打包构建去做的转化，因为手动计算还是非常损失开发效率的。

实现

postcss-pxtorem

npm install amfe-flexible -S
npm install postcss postcss-pxtorem --save-dev

{
    loader: "postcss-loader",
        options: {
            postcssOptions: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 100,
                        selectorBlackList: []
                    })
                ]
            }
        }
}

依赖于rem，要将amfe-flexible先引入项目，然后在webpack做css规则中做px转换rem配置，这样设计稿是多少像素你就可以手写多少，不用人力去换算rem，当你构建时，怎么帮你做出转化。

postcss-px-to-viewport

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

{
    loader: "postcss-loader",
        options: {
            postcssOptions: {
                plugins: [
                    require("postcss-px-to-viewport")({
                        unitToConvert: "px",
                        viewportWidth: 750,
                        exclude: /(/|\)(node_modules)(/|\)/,
                    })
                ]
            }
        }
}

同理，px转化成vw也是一样，不需要你去计算自动转化vw单位，而且不需要再引入其他的库。

但是要注意，vw单位实测在一些安卓低端机支持的并不好。