聊聊移动端的REM适配问题

作者:日期:2017-08-22 15:53:00 点击:151

 

详聊移动端rem的适配问题

现在移动端对于前端行业来说特别流行,废话不多说,那我们就来聊聊移动端的哪些事?

写移动端必须在html页面head标签内加一个meta标签—viewport视口 
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

来简单说说rem原理:

rem=root element 根元素 rem是来获取html(根元素)的fontSize值的 
1rem=16px(16px是谷歌浏览器默认的)

做移动端常用布局方式:

流式布局(百分比布局)+rem布局

移动端设计稿的尺寸:

 

  • 640x1136的宽度(单屏的页面) 参照iphone5 手机分辨率:320*2
  • 750x1334的宽度(单屏的页面) 参照iphone6 手机分辨率:375*2
  • 1242*2208的宽度(单屏的页面) 参照iphone6 plus 手机分辨率:414*3 

 

单屏页面常用在场景应用的H5页面中(活动页面)

手机分辨率:(iphone手机的机型)

  • iphone4 320x480 dpr 2.0
  • iphone5/5s 320x568 dpr 2.0
  • iphone6 375x667 dpr 2.0
  • iphone6 plus 414x736 dpr 3.0

    做移动端需要适配哪些机型?

    按照iphone为例(原因:设计图是参照iphone手机来做的)

  • iphone4/4s/5/5s 尺寸:320
  • iphone6/6s/7 尺寸:375
  • iphone6plus 尺寸:414
  • 640px 尺寸:大于等于640px的

适配移动端,来获取fontSize值

用媒体查询静态获取fontSize值
设计稿尺寸:640   参照iphone5   分辨率:320*2   dpr2.0
iphone4/4s/5/5s 分辨率320
html{ font-szie:50px; }

iphone6/6s 375
@media all and (min-width:375px){ html{ font-size:58.59375px; } }

iphone6p 414
@media all and (min-width:414px){ html{ font-size:64.68755px; } }

640尺寸
@media all and (min-width:640px){ html{ font-size:100px; } }

设计稿尺寸750 参照iphone6 分辨率:375*2 dpr:2.0
iphone6 375
html{ font-szie:50px; }

iphone4/4s/5/5s 320
@media all and (min-width:320px){ html{ font-size:42.66px; } }

iphone6plus 414
@media all and (min-width:320px){ html{ font-size:55.2px; } }

尺寸640
@media all and (min-width:640px){ html{ font-size:85.33px; } }

##用JS来动态获取fontSzie值

引入JS方式:内嵌式–在html页面中创建一个script元素(标签),把JS代码放在script元素内

第一种方法: 
<script>

/*动态设置像素比*/
var iScale = 1;
iScale = iScale / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + '">')
/*动态设置文字大小*/
function resize(){
var iWidth = document.documentElement.clientWidth;        document.getElementsByTagName('html')[0].style.fontSize = iWidth / 16 + 'px';
}
resize();
</script>
第二种方法:
<script>             
function setFontSize() {
var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth > 640) {
 deviceWidth = 640;
}          document.documentElement.style.fontSize = deviceWidth / 6.4 + "px";
}
var _t = null;
window.addEventListener("resize", function () {
clearTimeout(_t);
_t = setTimeout(setFontSize, 100);
}, false);
setFontSize();
})(window);
</script>

为什么把html的fontSize值设置成100px呢?

  • 默认1rem=16px,引申出来的计算公式 1rem=100px
  • 利于计算方便

怎么计算成rem单位?

比如设计图里面有个按钮,是100px*30px的,计算成rem单位为100/100=1rem、30/100=0.3rem 所以计算出的宽高为1rem*0.3rem(所有的像素px单位都要除以100,因为我们把html的fontSize值设置成了1rem=100px)

以上方法,只适合用于移动端

上一篇: 如何编写一个轻量级的CSS框架

下一篇: 返回列表