px,em,rem,vh,vw,vmin和vmax的区别

版权声明：作者已开启版权声明，如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/83781436

css调整大小是前端工程师常做的事，下面将对px,em,rem,vh,vw,vmin和vmax进行简要讲述

1.px

• 像素单位，是显示屏上显示的每一个小点，为显示的最小单位，是一个绝对尺寸

2.em

• 相对值
• 1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
  [浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素]
• 示例代码

  <div class="id1">div1
      <div class="id2">div2
          <div class="id3">div3</div>
      </div>
  </div>
  

  • 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下：
  • body继承浏览器默认字体大小：16px
  • class为id1的div字体大小继承自父元素body：16px*1.5em = 24px
  • class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px
  • class为id3的div字体大小继承自父元素id2：36px*1.5em = 54px

3.rem

• em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都必须知道父元素的字体大小，在多次使用中往往会给我们带来无法预知的错误风险。而rem是相对于根元素html。
• 示例代码

  <div class="id1">div1
      <div class="id2">div2
          <div class="id3">div3</div>
      </div>
  </div>
  

  • 字体大小：继承自浏览器默认字体大小16px * 1.5rem = 24px
  • rem是CSS3新引进来的一个度量单位，支持Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+，IE8及以下版本均不支持

4.% 百分比，相对长度单位，相对于父元素的百分比值

• em是相对于应用于当前当前元素的字体尺寸；而百分比则是相对于父元素的尺寸。

5.vh和vw，vmin和vmax

• vh和vw相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）
• 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度
• vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。