移动端 rem 布局 Mobile H5 rem.js
最编程
2024-02-12 07:52:08
...
rem是什么？
- rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
- 看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。
- 它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。
rem布局
原理是，先按定高宽设计出来页面，然后转换为rem单位，
配合js查询屏幕大小来改变html的font-size，
最终做出所谓的完美自适应。
rem适用场景
rem+js是宽度自适应，无法做到高度自适应，所以那些对高度要求很高的rem+js无法实现。
改变浏览器宽度，你会发现，页面所有元素的高宽都等比例缩放，
也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。。
优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。
缺点：碰到重视高度的设计，或者重视元素间间距的设计，那就玩不开了。
rem.js
代码一、下面是我在用的rem.js（把屏幕宽度分成6.4份-根据iPhone5宽320px进行设计的）
;
(function (win) {
var doc = win.document;
var docEl = doc.documentElement;
var tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
var rem = width / 6.4;
docEl.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function () {
clearTimeout(tid);
tid = setTimeout(refreshRem, 10);
}, false);
win.addEventListener('pageshow', function (e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 10);
}
}, false);
refreshRem();
})(window);
代码二、小米官网的写法
!function(n){
var e=n.document,
t=e.documentElement,
i=720,
d=i/100,
o="orientationchange"in n?"orientationchange":"resize",
a=function(){
var n=t.clientWidth||320;n>720&&(n=720);
t.style.fontSize=n/d+"px"
};
e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);代码三、最简单的小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#header{
height: 3rem;
display: flex;
}
#div1{
width: 2rem;
height: 3rem;
background-color: red;
float: left;
}
#div2{
flex: 1;
/*width: 5.4rem;*/
height: 3rem;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div id="header">
<div id="div1"></div>
<div id="div2"></div>
</div>
<script src="js/rem.js"></script>
</body>
</html>
觉得有帮助的小伙伴右上角点个赞~
