【移动端】px、em、rem、vw、百分比的区别px: 是固定单位，其他几种都是相对单位。 em: 默认字体大小的倍数。

回答

px: 是固定单位，其他几种都是相对单位。
em: 默认字体大小的倍数。比如给元素设置font-size：2em
rm: 根元素（html节点）字体大小的倍数。
1vw: 代表浏览器视口宽度的1%
1%: 对不同的属性有不同的含义。

需要注意的是Chrome 浏览器下的最小是12px，设置低于12px的值最终也会展示12px。

解析

做完下面几个题目，测一测自己是否真正分辨这几个单位的区别

题目1：关于px，以下说法正确的是？(单选)

A、小明电脑的分辨率是1280x800，在写页面CSS时给元素设置width: 1280px。这个元素的实际占据的宽度和电脑屏幕宽度相同
B、小明电脑的分辨率是1280x800，在写页面CSS时给元素设置width: 1280px。这个元素的实际占据的宽度和浏览器窗口宽度相同
C、小明把电脑的分辨率调到2560x1600，CSS里元素宽度依旧是width: 1280px。这个元素的实际占据的宽度和电脑屏幕宽度相同
D、小明把电脑的分辨率调到2560x1600，CSS里元素宽度依旧是width: 1280px。这个元素的实际占据的宽度和浏览器窗口宽度相同

题目2: 下面代码中，body、article、p的实际字体大小分别是多少？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>em 演示</title>
  </head>
  <body>
    <article>
      <p>hello world</p>
    </article>
    
    <style>
      body{
        font-size: 2em;
      }
      p {
        font-size: 2em;
      }
    </style>
  </body>
</html>

A、body是32px， article是16px，p是32px
B、body是32px， article是32px，p是64px
C、body是16px， article是16px，p是32px
D、body是32px， article是32px，p是32px

题目3: 以下代码中，p的width的实际值是多少？(单选)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>em 演示</title>
  </head>
  <body>
    <article>
      <p>hello world</p>
    </article>
    
    <style>
      body{
        font-size: 2em;
      }
      p {
        font-size: 2em;
        width: 2em;
      }
    </style>
  </body>
</html>

A、32px
B、64px
C、128px
D、256px

题目4: 以下代码中，p的字号是多少？(单选)

A、20px
B、40px
C、80px
D、32px

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>rem 演示</title>
  </head>
  <body>
    <article>
      <p>hello world</p>
    </article>
    
    <style>
      body {
        font-size: 10px;
      }
      article {
        font-size: 20px;
      }
      p {
        font-size: 2rem;
      }
    </style>
  </body>
</html>

题目5：关于vw，以下说法正确的是(单选)

A、小明电脑的分辨率是1280x800，在写页面CSS时给元素设置width: 100vw，表示这个元素的width宽度和电脑屏幕宽度相同，是1280px
B、小明电脑的分辨率是1280x800，在写页面CSS时给元素设置width: 100vw，表示这个元素的width和浏览器的窗口宽度相同
C、小明电脑的分辨率是1280x800，在写页面CSS时给元素设置width: 100vw，表示这个元素的width和父容器的width相同
D、width: 100vh 和 width: 100% 等价题目6：关于width: 100%，以下说法正确的是(多选)
A、在标准盒模型下，width: 100%表示元素的content宽度等于父元素的content宽度
B、在标准盒模型下，width: 100%表示元素的content宽度等于父元素的content + padding + border宽度
C、IE盒模型下，width: 100%表示元素的content + padding + border宽度等于父元素content的宽度
D、IE盒模型下，width: 100%表示元素的content宽度等于父元素content的宽度

答案解析

题目1：A 。

题目2：B。html默认是16px，body是2em，是默认的2倍32px， article是32px，p是article的2倍64px。

题目3：C。p的宽度是默认字号的2倍，字号是64px。

题目4：D。p是2rem，是html字号的2倍。 html默认字号是16px。

题目5：B。100vw表示把浏览器窗口宽度分100份，占100份。注意浏览器窗口宽度和屏幕宽度的区别。

题目6：A、C。在标准盒模型下，width: 100%表示元素的content宽度等于父元素的content宽度，IE盒模型下，width: 100%表示元素的content + padding + border宽度等于父元素content的宽度。动手做个测试即可。