CSS中 px em rem 区别

• px是固定的像素，设置了就无法适应页面的大小而改变；
  em和rem为相对长度单位，更应用于响应式页面；
  em相对于父元素，rem相对于根元素。

div {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}
p {
  font-size: 0.5em; /* 20px */ 
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;
}

延伸：

chrome设置的最小字体大小为12px，意思就是说低于12px的字体大小会被默认为12px