CSS-010-动态REM

动态REM

手机专用的自适应方案

REM是什么

常见单位

1
2
3
4
5
px 像素
em 一个字母的宽度 、一个汉子的宽度？
rem root em 根元素的 font-size
vh viewport height 100vh = 视口高度
vw viewport width 100vw = 视口宽度

网页的默认font-size是 16px

chrome有设置最小字号是12px，此时你就算写出 font-size:6px 也会变成 12px

问题1: font-size:1rem 是多少像素

1
2
3
4
5
6
7
8
9
10
p{font-size:1rem;}
答案是 16px,因为根元素font-size是16

body{font-size:20px;}
p{font-size:1rem;}
答案是 16px,因为根元素font-size是16, html才是根元素

html{font-size:20px;}
p{font-size:1rem;}
答案是 20px,因为根元素font-size是20

REM和 EM区别

p 的高度是多少

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <style>
    p{
      height:2em;
    }
  </style>
</head>
<body>
  <p>回答</p>
</body>
</html>

经过浏览器检查发现是 32px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
  <style>
    p{
      height:2em;
      font-size:30px;
    }
  </style>
</head>
<body>
  <p>回答</p>
</body>
</html>

经过浏览器检查发现是 60px,结论：1em就是自身元素 font-size的像素值

REM是根元素的font-size,em是自身元素的font-size

动态REM

移动端写页面的演进

  • 百分比布局，只能保证水平方向没问题，但是高度呢？
    • 要求高度是宽度的1半，就很难做到，因为 height是不会按照父容器的宽度来定的

  • 动态REM

    1
    2
    3
    4
    5
    当屏幕 640px的时候 banner为 320*320

    当屏幕 320px的时候 banner为 160*160

    当屏幕 414px的时候 banner为 212*212
    • 一切单位以“宽度”为基准，等比例缩放
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
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <style>
    *{margin:0;padding:0;}
    body{
      font-size:16px;
    }
    .child{
      background:#ddd;
      height: 0.2rem;
      width: 0.4rem;
      float:left;
      margin:0.05rem 0.05rem;
    }
    
    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
  </style>
  <script>
    var pageWidth = window.innerWidth;
   document.write('<style>html{font-size:'+pageWidth+'px;}</style>');
  </script>
</head>
<body>
  <div class="parent clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>  
</body>
</html>

对REM进行微调

  • border:1px问题，无法在小的情况
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
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <style>
    *{margin:0;padding:0;}
    *{box-sizing:border-box;}
    body{
      font-size:16px;
    }
    .child{
      background:#ddd;
      height:2rem;
      width: 4rem;
      float:left;
      margin:0.5rem 0.5rem;
      /* 当像素特别小的时候就用1px因为网页最小1px */
      border:1px solid red;
    }
    
    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
  </style>
  <script>
    var pageWidth = window.innerWidth;
   document.write('<style>html{font-size:'+pageWidth/10+'px;}</style>');
  </script>
</head>
<body>
  <div class="parent clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>  
</body>
</html>