px、em、rem、%、vw、vh、vm 这些单位的区别

1.px

px就是像素,也是我们现在经常使用的基本单位,比如常常听到的电脑像素
是1024x768的,表示的是水平方向是1024个像素点,垂直方向是
768个像素点。 

2.em

em参考物是父元素的font-size,默认字体大小是16px,
所以1em不是固定值,因为它会继承父元素的字体大小 

3.rem

rem参考物是相对于根元素,我们在使用时可以在根元素设置一个
参考值即可,相对于em使用,减少很大运算工作量,例:html大小
为10px,12rem就是120px

4.%

% 是相对于父元素的大小设定的比率,
position:absolute;的元素是相对于已经定位的父元素,
position:fixed; 的元素是相对可视窗口

5.vw

vw相对于视口的宽度。视口被均分为100单位
h1 {
	font-size: 8vw;
}
再举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px

6.vh

vh相对于视口的宽度。视口被均分为100单位
 h1 { 
      font-size: 8vh;
 } 
再举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px

附录:

pxtorem.com/ px 换算 rem
pxtoem.com/ px 换算 em 

未经允许不得转载:大自然的搬运工 » px、em、rem、%、vw、vh、vm 这些单位的区别

赞 (0)

评论 5

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
    • luyunlong
      luyunlongI don't get it回复
    • luyunlong
      luyunlongno no no回复