移动端h5页面rem的用法

前端开发 124 Views 0 Comments

移动web开发要面对很多尺寸的设备,做自适应,来满足不同屏幕同一效果。下面推荐一种方法,只需一段js就可完美解决。直接看代码。

!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=750,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>750&&(n=750);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

看代码,其中重要的就是两个参数i、d,第一个参数,是设计稿的宽度(ui给前端设计稿一般750px),第二个参数是px与rem的转换比例,通常会写100(因为好算);

举个例子:实际应用起来就是,#box1{ height:100px;}而调用了rem就是#box1{ height:1rem;}以此类推。 100px = 1rem; 1px = 0.01rem。

这种方法凡是跟尺寸有关的padding、margin、width、height等等,都可以用rem来写单位,这样当不同分辨率的手机在看同一个页面时,效果几乎是一样的。

当然了,要把这段js代码最好封装在一个单独的js文件里,并且放在所有的css文件引入之前加载。

转载请注明:一只羊博客 » 移动端h5页面rem的用法

分享到:
(0)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址