px、em、rem、vw、百分比的区别

2023-03-09 09:19:18 浏览数 (1)

px是固定单位,其他几种都是相对单位。当我们把电脑屏幕的分辨率调为1440*900时,css里设置的1px实际的物理尺寸就是屏幕宽度的1/1440。

em:默认字体大小的倍数。比如给元素设置font-size: 2em,这里的默认字体大小实际上是继承自父亲的大小,font-size: 2em表示当前元素字体大小是父亲的2倍。当给元素设置width: 2em,这里的默认字体大小是该元素自身的实际字体大小。

rem:根元素(html 节点)字体大小的倍数。比如一个元素设置 width: 2rem 表示该元素宽度为html节点的font-size 大小的2倍。 如果html未设置font-size的大小,默认是16px。

1vw 代表浏览器视口宽度的1%。

1% 对不同属性有不同的含义。 font-size: 200% 和font-size: 2em 一样,表示字体大小是默认(继承自父亲)字体大小的2倍。 line-height: 200% 表示行高是自己字体大小的2倍。 width: 100%表示自己content的宽度等于父亲content宽度的1倍。

需要注意的是chrome浏览器下文字最小是12px,设置低于12px的值最终也会展示12px。

0 人点赞