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

  • Post author:
  • Post category:其他



以下仅供自己学习记录!


一. 移动端适配问题


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



版权声明:本文为JxiaoZhang原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。