1、px、em、rem、vw、vh有什么区别？

区别：

  1.px：就是像素pixel的缩写
  2.em：是一个基于font-size的相对单位，1em = 1font-size
  3.rem: 和em类似，与em不同的是rem是基于html的font-size的大小，是css3新增加的相对单位
  4.vw和vh：是视口的相对单位，1vw相当于视口宽度的1%，1vh相当于视口高度的1%。

视口

视口是指去掉浏览器头尾所剩的地方，**注意：视口 不等于屏幕 大小**

<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目舞狮那小子</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html {
      font-size: 14px;
    }
    div {
      /* width:5rem;*/
      /* text-indent: 5em; */
      width: 80vw;
      height: 80vh;
      font-size: 20px;
      background-color: #ccc;
    }
  </style>
  <body>
    <div></div>
  </body>
</html>

扩展：

vmax vh和vw中较大的值
vmin vh和vw中较小的值
如果某个元素在手机横屏和竖屏时大小保持一致，可以考虑使用vmax或vmin

css面试题

1、px、em、rem、vw、vh有什么区别？

区别：

视口

扩展：