HTML5技术

移动端页面开发适配 rem布局原理 - 我正经七百九十九(2)

字号+ 作者:H5之家 来源:H5之家 2017-03-20 10:00 我要评论( )

if (width dpr 540) {判断屏幕逻辑像素大于540时,取540 width = 540 dpr; } var rem = width 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; 总结: 使用rem布局,实质都是通过动态改写ht

if (width dpr 540) {判断屏幕逻辑像素大于540时,取540
width = 540 dpr;
}
var rem = width 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
总结:

使用rem布局,实质都是通过动态改写html的font-size基准值,来实现不同设备下的良好统一适配;

网易与淘宝不同 的地方是 ,网易将布局视口设置成了 视觉视口,淘宝将布局视口设置成了物理像素大小,通过 scale缩放嵌入了 视觉视口中;

容器元素的字体大小都不使用rem,需要额外的media查询;

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Office 365开发概述及生态环境介绍(一) - 陈希章

    Office 365开发概述及生态环境介绍(一) - 陈希章

    2017-03-19 09:02

  • 记录Winform开发过程中遇到的情况 - 神雕爱大侠

    记录Winform开发过程中遇到的情况 - 神雕爱大侠

    2017-03-18 10:03

  • 没有功能需求设计文档?对不起,拒绝开发! - CharlieChu

    没有功能需求设计文档?对不起,拒绝开发! - CharlieChu

    2017-03-16 13:04

  • 移动端部分兼容问题总结 - 巷子太窄

    移动端部分兼容问题总结 - 巷子太窄

    2017-03-14 16:00

网友点评
-