CSS 单位中 px、em、rem、vw/vh 的区别px px（Pixel）像素，绝对单位。px 是相对于显示器屏幕

1、`px`

px（Pixel） 像素，绝对单位。px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位。


 <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
 </style>

 <body>
    <div class="box"></div>
 </body>

2、`em`

em 是相对长度单位，相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未设置，则是相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小因此并不是一个固定的值。

<style>
        .p1 {
            text-indent: 2em;
        }
</style>
 
<body>
    <p class="p1">人生若只如初见，何事秋风悲画扇1</p>
    <p>人生若只如初见，何事秋风悲画扇2</p>
</body>

3、`rem`

rem 是 CSS3 新增的一个相对单位（root em 根 em）,使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素，它是 px 的倍数。HTML 根元素默认是 16px ，那么 1rem=16px 。我们可以通过更改 HTML 根元素的 font-size 来调整 rem 的值

rem 体验

rem 单位尺寸= px 单位数值/基准根字号

 <style>
        html {
            font-size: 16px;
        }
        .box1 {
            width: 5rem;
            height: 10rem;
            background-color: #ccc;
        }

        .box2 {
            width: 80px;
            height: 160px;
            background-color: #333;
        }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

在根标签 font-size 为 16px 下，1rem=16px ,80px=5rem

rem和媒体查询适配

媒体查询设置根标签文字大小为视口宽度的 1/10, 宽高，内外边距等单位设置为 rem 值

 <style>
        /*◆当前屏幕宽度为320px的时候执行的css*/
        @media (width:320px) {
            html {
                font-size: 32px;
            }
        }

         /*◆当前屏幕宽度为375px的时候执行的css*/
        @media (width:375px) {
            html {
                font-size: 37.5px;
            }
        }

        /*◆当前屏幕宽度为414px的时候执行的css*/
        @media (width:414px) {
            html {
                font-size: 41.4px;
            }
        }

        .box {
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }
</style>

<body>
    <div class="box"></div>
</body>

当前屏幕宽度为320px 2rem=64px

当前屏幕宽度为375px 2rem=75px

当前屏幕宽度为414px 2rem=82.8px

特别注意，要想看到不同效果，必须屏幕缩放设置为100% ；但是后面引入flexible.js，就不需要更改屏幕缩放的百分比了，也不需要我们来设置网页配合不同手机屏幕尺寸所执行的不同的css

rem适配步骤

我们每次都要写媒体查询，还要适配不同型号的屏幕，太麻烦啦，已经有人帮我们写好啦，只需在script 标签，也就是 body 标签结束之前链入 flexible.js 即可

链入flexible.js,将根标签文字大小设置为视口宽度的1/10
将 px 单位转换为 rem 尺寸=测量的 px 尺寸/(视口宽的1/10)

flexible.js源码


(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style> 
        .box {
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }
    </style>    
</head>

<body>
    <div class="box"></div>  
    <script src="./js/flexible.js"></script>
</body>
</html>

4、`vw/vh`（移动端适配）

1vw =1% 的视口宽度

1vh=1%的视口高度

要么用 vw ,要么用 vh, 两者不要混着用，会出问题

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>

        .box1 {
            width: 10vw;
            height: 10vw;
            background-color: #ccc;
            margin: 5vw auto;
        }

        .box2 {
            width: 10vh;
            height: 10vh;
            background-color: pink;
            margin: 5vh auto;
        }
          
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

</body>
</html>

vw 适配效果

vh 适配效果

CSS 单位中 px、em、rem、vw/vh 的区别

1、px

2、em

3、rem