关于移动端、浏览器适配解决方案优缺点对比

以下仅供自己学习记录！

一. 移动端适配问题

1、使用rem进行浏览器适配：比较常用

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

使用rem的优势非常明显了，尤其是在现在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，所以设备上的展现都统一起来了。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。

rem的优势也正是他的缺点，rem的屏幕自适应与当前两大平台的设计哲学不一致！从用户体验上来看，文字阅读的舒适度跟媒体介质大小是没关系的。

2、使用浏览器的缩放功能

先按设计稿还原html，然后再设置viewport属性

百分比适配的方案在对页面展示环境没有约束的情况下比较实用，比如你的页面可能在浏览器打开，也可能在产品内打开，或者以闪屏的形式展现，这时候使用百分比，你就不用再考虑页面能否一屏幕完全显示的问题了。

弊端：这种方法在PC端打开部分界面可能会变形，布局错乱，不太推荐这种方法

3、适应响应式布局来做，用媒体查询，具体的可以参考bootstrap

弊端:冗余代码较多，要做多个分辨率的适配，css代码写的较多。除非用成熟的bootstrap框架节省一些工作量。

4、使用自适应百分比

这种方法比较古老，做出来的界面在各个分辨率的适配上比较不好，例如一个div在分辨率为320*568是320px * 100px  在375 * 667 的分辨率显示就是 375px * 100px 效果不是等比拉升

总结：使用rem比较多，当然也可以借助bootstrap也是比较常用的。至于其他的看情况具体使用。

二. 浏览器适配问题

参考链接：https://blog.csdn.net/wanmeiyinyue315/article/details/79654984