移动WEB开发---用rem开发响应式设计

效果

这里写图片描述

这里写图片描述

rem与em区别

先讲一个基础知识点
em是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根元素<html>

代码

在每次浏览器大小变化时页面的html的font-size大小都会改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rem</title>
<style>
body {
font-size: 12px;
margin: 0;
}
.btns {
width: 10rem;
margin: 0 auto;
}
.btns > a {
float: left;
width: 2.5rem;
text-align: center;
padding-top: 0.2rem;
text-decoration: none;
}
.btns > a > i {
display: inline-block;
width: 1.2rem;
height: 1.2rem;
background: gray;
border-radius: 50%;
}
.btns > a > span {
display: block;
line-height: 0.8rem;
font-size: 14px;
}
</style>
<script>
(function () {
//获取根元素, 即HTML
let de = document.documentElement;
//重置根元素字体大小
function resetFontSize() {
let w = de.getBoundingClientRect().width;//获取当前浏览器的高度
if (w > 640) w = 640;//设置一个最大宽度, 避免在ipad等设备过渡放大
de.style.fontSize = (w / 10) + 'px';
}
//页面加载就位根元素字号赋值
resetFontSize();
//页面大小改变时, 重新设置根元素字号
window.addEventListener('resize', resetFontSize, false);
})();
</script>
</head>
<body>
<div class="btns">
<a href="#"><span>1</span></a>
<a href="#"><span>2</span></a>
<a href="#"><span>3</span></a>
<a href="#"><span>4</span></a>
<a href="#"><span>5</span></a>
<a href="#"><span>6</span></a>
</div>
</body>
</html>

越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!