首页 > 代码库 > 关于移动端--适配
关于移动端--适配
1 为什么要适配?
要实现等比;
默认情况等不等比?不加meta标签是等比的
加了meta标签就不等比了。
<metaname="viewport"content="width=device-width,
initial-scale=1.0,user-scalable=no"/>
2 rem适配的本质:rem参照根元素字体(html字体)
不管视图多大,在不同的移动端机型上,1rem等于视图的宽度,所以,根标签的font-size改成布局视口的大小。
3 viewpoint适配的本质:UI给的320px图纸(页面),让所有设备的布局视口变为320px,动态改变initial-scale的比值。
4.rem适配
优点:可以使用理想标签,
可以实现等比缩放
缺点:换算比较麻烦
核心思想:基于rem
5.viewport适配
优点:避免复杂的计算,直接使用UI的标准像素值
缺点:不能使用理想视口
图片失真情况很严重
6.1px像素(1物理像素)实现原理
让所有布局元素(div)都为rem单位,边框为px单位
让页面中所有元素都缩小一半,让布局(div)元素rem*2
这样 1px css像素就变成了1px的物理像素.
关于移动端--适配
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。