移动端适配

Posted 2021-06-22 zc-lee

移动端适配

如何适配

viewport

viewport 设置理想视口

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">

我们在移动端视口要想视觉效果和体验好，那么我们的视口宽度必去无限接近理想视口

理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。

于是上述的meta设置，就是我们的理想设置，他规定了我们的视口宽度为屏幕宽度，初始缩放比例为1，就是初始时候我们的视觉视口就是理想视口！
其中user-scalable设置为no 可以解决移动端点击事件延迟问题（拓展）

解决适配方法

rem适配

原理

// set 1rem = viewWidth / 10
function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + \'px\'
}
setRemUnit();

rem 是相对于html节点的font-size来做计算的。所以在页面初始话的时候给根元素设置一个font-size，接下来的元素就根据rem来布局，这样就可以保证在页面大小变化时，布局可以自适应，
如此我们只需要给设计稿的px转换成对应的rem单位即可
当然，这个方案只是个过渡方案，为什么说是过渡方案
因为当年viewport在低版本安卓设备上还有兼容问题，而vw，vh还没能实现所有浏览器兼容，所以flexible方案用rem来模拟vmin来实现在不同设备等比缩放的“通用”方案，之所以说是通用方案,是因为他这个方案是根据设备大小去判断页面的展示空间大小即屏幕大小，然后根据屏幕大小去百分百还原设计稿，从而让人看到的效果(展示范围)是一样的，这样一来，苹果5 和苹果6p屏幕如果你按照设计稿还原的话，字体大小实际上不一样，而人们在一样的距离上希望看到的大小其实是一样的，本质上，用户使用更大的屏幕，是想看到更多的内容，而不是更大的字。
so，这个用缩放来解决问题的方案是个过渡方案，注定时代所淘汰

vw，vh布局

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。

webpack解析css 的时候用postcss-loader 有个postcss-px-to-viewport能自动实现px到vw的转化

{
    loader: \'postcss-loader\',
    options: {
    	plugins: ()=>[
        	require(\'autoprefixer\')({
        		browsers: [\'last 5 versions\']
        	}),
        	require(\'postcss-px-to-viewport\')({
        		viewportWidth: 375, //视口宽度（数字)
        		viewportHeight: 1334, //视口高度（数字）
        		unitPrecision: 3, //设置的保留小数位数（数字）
        		viewportUnit: \'vw\', //设置要转换的单位（字符串）
        		selectorBlackList: [\'.ignore\', \'.hairlines\'], //不需要进行转换的类名（数组）
                minPixelValue: 1, //设置要替换的最小像素值（数字）
                mediaQuery: false //允许在媒体查询中转换px（true/false）
        	})
    	]
}

px为主，vx和vxxx（vw/vh/vmax/vmin）为辅，搭配一些flex（推荐）

移动端适配流程

1. 在head 设置width=device-width的viewport
2. 在css中使用px
3. 在适当的场景使用flex布局，或者配合vw进行自适应
4. 在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询
5. 在跨设备类型如果交互差异太大的情况，考虑分开项目开发

---

面试官：你了解过移动端适配吗？