移动端前端适配方案（总结）

Myth丶恋晨 2022-01-16 04:53 463阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

关于移动端适配的技术方案主要有以下四种

（1）通过媒体查询的方式即CSS3的meida queries

（2）以天猫首页为代表的 flex 弹性布局

（3）以淘宝首页为代表的 rem+viewport缩放

（4）rem 方式

**1.Media Queries**

早期采用的布局方式，它主要是通过查询设备的宽度来执行不同的 `css` 代码，最终达到界面的配置。

核心代码

@media screen and (max-width: 600px) {/*当屏幕尺寸小于600px时，应用下面的CSS样式*/
     /*你的css代码*/
     }

优点

media query可以做到设备像素比的判断，方法简单，成本低，特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局  
图片便于修改，只需修改css文件  
调整屏幕宽度的时候不用刷新页面即可响应式展示

缺点

代码量比较大，维护不方便  
为了兼顾大屏幕或高清设备，会造成其他设备资源浪费，特别是加载图片资源  
为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式

2.Flex弹性布局   
以天猫的实现方式进行说明：

它的viewport是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

高度定死，宽度自适应，元素都采用px做单位。

随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。

**3.rem + viewport 缩放**   
这也是淘宝使用的方案，根据屏幕宽度设定 `rem` 值，需要适配的元素都使用 `rem` 为单位，不需要适配的元素还是使用 `px` 为单位。（1em = 16px）

PS：rem   
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？  
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对  
大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁  
反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一  
个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。比如：p\{font-size:14px;font-size:0.875rem;\}  
(推荐一个单位转换的工具：http://pxtoem.com/)

实现原理   
动态设置viewport，根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.

如iphone6 plus的dpr为3, 则页面整体放大3倍, 1px(css单位)在plus下默认为3px(物理像素)   
然后viewport设置为1/3, 这样页面整体缩回原始大小. 从而实现适配。   
这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。   
这个device-width的计算公式为：设备的物理分辨率/(devicePixelRatio \* scale)，   
在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio 。  
优点：解决1px问题，移动端屏幕适配

4、rem实现   
比如说“魅族”移动端的实现方式，viewport也是固定的：   
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">。

通过以下代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)，才html面添加以下script

css使用px来设置宽度，然后通过插件postcss-px2rem把px转化成rem

优点：保证设计图尺寸高度还原，适配代码设置好就ok，维护适配代码的工作量极低

缺点：兼容性需要ie9+，移动端几乎全适配

转载于:https://my.oschina.net/carbenson/blog/3045330

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/869e4fdbef3e42dfb5a44369619effbf.png