最简单的移动端适配方案

痛定思痛。 2022-05-16 04:34 312阅读 0赞

目前最流行的方案当属淘宝的flexible了，因为之前一直做服务端开发，对前端不是很了解。对于这套方案看了n久还是不太理解，后来自己学习viewport的相关概念，捉摸出一套自己的办法（至少我没查到有人这么干的…），写在这里和大家分享一下。  
其实对于多数的移动h5的适配需求并没有那么繁琐，只要保证和设计稿比例一致，在各种奇葩屏幕都能够显示出完整的信息就可以了。所以这里不讨论retina屏幕图片模糊问题，只考虑适配

**需求：**  
通过设计稿各种标注，解决css中尺寸和单位问题  
保证各种手机能够完整显示内容，比例和设计稿一致  
如果希望做retina适配，多一步计算dpr并按需加载图片就行了

**假定设计稿为750px**

**方案一：**

必备知识：rem
    在html中设置font-size为10px，那么1rem就为10px，所以想表示宽度为100px的div那就用10rem

*  获取手机屏幕的真是宽度：

window.innerWidth;

*  html的font-size:

var re = window.innerWidth/750;

*这里需要说明一下，除以750是除以设计稿的宽度。设计稿中的1px换做其他屏幕中就是 其他手机屏幕尺寸的1/750，也就是1rem。*

*  动态设置rem大小

var docEl = document.documentElement;
    var fontEl = document.createElement('style');
    docEl.firstElementChild.appendChild(fontEl);
    fontEl.innerHTML = 'html{font-size:' + rem + 'px;}';

这个时候就尽情玩耍吧，100px就写作100rem，字体的话也直接写rem。

**方案二：**

首先要理解viewport的概念，可以参考这篇文章，写的很详细文移动前端开发之viewport的深入理解。
    总结下来就是viewport在移动端是可变的，我们把这个叫做layout viewport。
    默认都比手机的屏幕大很多（多数都是980px）。如果什么都不设置，我们的px都是相对于这个layout viewport而言的。
    所以正常情况下我们在手机上看pc的页面都是看不全的，但是各个手机厂商的做法不太一样，有的就是看不全了，只显示
    一个角落，但是例如iphone这种就会对页面进行缩放，让整个pc页面都挤进你的小屏幕中，所以看到的字体或者图片本身
    也就小了。如果还是不明白呢也没关系。按照下面的做法做就可以了。

之前提到所有的px都是相对layout viewport而言的，750的设计稿中100px是相对750px宽度，如果让手机也认为自己的layout viewport是750px，那么所有的尺寸换算就交给系统自己完成就行了。所以：

设置好之后，按照设计稿元素尺寸直接写100px就是想要的效果了

**总结：**  
以上就是我对移动端处理的办法，简单而且有效。不需要复杂的js代码，不用less，scss也能正常使用。如果要说缺点的话也就是随着屏幕尺寸增大或者缩小，字体也会随着增大缩小，并不会像淘宝那种在视觉感官上的大小不变，不过我觉得对于绝大多数的h5页面是没必要这么做的。

因为是刚刚转做前端，说的不对的地方还请多多指出，谢谢！  
另外，始终不太理解淘宝对于字体大小不变的方案是怎么解决的，如果能够用简单的几句话讲明白这个原理希望能告知下哈！