详聊移动端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">
1. 来简单说说rem原理:rem=root element 根元素 rem是来获取html(根元素)的fontSize值的
2. 做移动端常用布局方式:流式布局(百分比布局)+rem布局
3. 移动端设计稿的尺寸:
640x1136的宽度(单屏的页面) 参照iphone5 手机分辨率:320*2
750x1334的宽度(单屏的页面) 参照iphone6 手机分辨率:375*2
1242*2208的宽度(单屏的页面) 参照iphone6 plus 手机分辨率:414*3
单屏页面常用在场景应用的H5页面中(活动页面)
4. 手机分辨率:(iphone手机的机型)
iphone4 320x480 dpr 2.0
iphone5/5s 320x568 dpr 2.0
iphone6 375x667 dpr 2.0
iphone6 plus 414x736 dpr 3.0
5. 做移动端需要适配哪些机型?
按照iphone为例(原因:设计图是参照iphone手机来做的)
iphone4/4s/5/5s 尺寸:320
iphone6/6s/7 尺寸:375
iphone6plus 尺寸:414
640px 尺寸:大于等于640px的
6. 适配移动端,来获取fontSize值
1) 用媒体查询静态获取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; } }
2) 用JS来动态获取fontSzie值
引入JS方式:内嵌式--在html页面中创建一个script元素(标签),把JS代码放在script元素内
第一种方法:
<script>
</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呢?
1. 默认1rem=16px,引申出来的计算公式 1rem=100px
2. 利于计算方便
怎么计算成rem单位?
比如设计图里面有个按钮,是100px*30px的,计算成rem单位为100/100=1rem、30/100=0.3rem 所以计算出的宽高为1rem*0.3rem(所有的像素px单位都要除以100,因为我们把html的fontSize值设置成了1rem=100px)