是什么

都是不同形式的计量单位

px

绝对长度单位， 显示器上的一个个点。

em

相对长度单位， 相对于当前对象内文本的字体尺寸。

<div style="font-size:2em">111</div>

• 浏览器默认字体大小为16px, 那2em===32px
• em的值不固定
  • 会继承父元素的字体大小
  • 默认浏览器字体大小

rem

相对长度单位，相对于html根元素的font-size的值

/* 1rem=10px  16*62.5%=10 */
html{font-size:62.5%}  

• 集合px和em的优点
• 总是相对于html根计算

vh/vw

新长度单位， 把窗口分成100份， 100vw则表示满宽，50vw表示一半， vh同理

窗口

• pc端： 浏览器的可视区域
• 移动端： 布局视口viewport

%

相对于父元素宽度的计量

• 普通元素
• positon:absolute的元素相对于已定位的元素
• postion:fixed的元素相对于viewport

原理

FAQ