文章目录
  1. 1. css兼容写法
  2. 2. js兼容写法
  3. 3. 用法

网页布局一般有,固定布局,流线型布局,居中布局,伸缩布局,rem布局,我们今天来聊下rem布局,rem布局一般是用在移动端的,PC端用的少,而且rem是css3出的新特性,一般在做移动端的时候他是首选的,因为移动端要兼容不同手机的尺寸

css兼容写法

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
@media screen and (min-width: 320px){
html{
/* 注意这里是1rem===16px并且他是按照20份进行计算的,如果不是按照20份进行划分的话,就不要这样写 */
font-size: 16px;
}
}
@media screen and (min-width: 360px){
html{
font-size: 18px;
}
}
@media screen and (min-width: 375px){
html{
font-size: 18.75px;
}
}
@media screen and (min-width: 414px){
html{
font-size: 20.7px;
}
}
@media screen and (min-width: 440px){
html{
font-size: 22px;
}
}
@media screen and (min-width: 480px){
html{
font-size: 24px;
}
}
@media screen and (min-width: 520px){
html{
font-size: 26px;
}
}
@media screen and (min-width: 560px){
html{
font-size: 28px;
}
}
@media screen and (min-width: 600px){
html{
font-size: 30px;
}
}
@media screen and (min-width: 640px){
html{
font-size:32px;
}
}

js兼容写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
'use strict';
//注意它这是按照我css的媒体查询一样的写法,都是按照16px等
;(function(doc, win, undefined) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (clientWidth === undefined) return;
docEl.style.fontSize = 16 * (clientWidth / 320) + 'px';
};
if (doc.addEventListener === undefined) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window);

用法

1
2
3
4
div{
width:10/32rem;
/*注意一定要除以32原因是我按照640的图纸,分成20等分,一等分占32px,也就是说1/32=rem/10,1rem=32像素,那么10像素不就是占10/32*/
}
文章目录
  1. 1. css兼容写法
  2. 2. js兼容写法
  3. 3. 用法