解析CSS单位px, em, rem, vw, vh, vmin, vmax

  • A+
所属分类:前端开发

px

px是绝对单位,页面按照精确的像素展示。1px表示1像素。

em

em是相对单位,相对于父节点或者自身的字体大小。比如父节点定义了字体大小为  ,那么子节点如果定义1em就等于10px,1.2em等于12px。

如果所有父节点都没有定义字体大小,会相对于根节点计算相对大小。

因此使用em单位可以很方便调整页面的显示。我们只需要修改父节点或者根节点的字体大小,就可以控制页面的显示效果。

注意,em不仅仅可以作为字体大小单位,也可以其他任何属性的单位,例如width, height, border等等。

示例:

第一个div的宽度,高度以及边框大小会相对于根节点<html>的字体大小,即14px。而第二个div下的span的字体大小1.3em会相对于第二个div的字体大小,也就是12px。

rem

rem可以理解为特殊的em,因为它始终相对于根节点的字体大小。

示例:

同样,第一个div的宽度,高度以及边框大小会相对于根节点<html>的字体大小,即14px。不同的是span的字体大小1.3rem同样会相对于根节点字体大小,即使父节点定义了不同的字体大小,也不会对其起任何作用。

vw,vh,vmin,vmax

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%,100vw等于视窗宽度。

vh:viewpoint height,视窗高度,1vh等于视窗高度的1%,100vh等于视窗高度。

vmin:vw和vh中较小的那个。

vmax:vw和vh中较大的那个。

这个单位可以使你的应用容易的适配各种大小的浏览器窗口。因为它会随着浏览器窗口大小而动态变化。

示例:

对于第一个div,我们想让它始终占满整个窗口,就可以用vm和vh单位。

因为border在宽度和高度上各占了2px,因此我们在div的width和height属性上各减去2px从而使div刚好占满浏览器窗口。

你可以试试调整浏览器窗口的大小,或者缩放浏览器,这个div始终会跟随浏览器窗口而变化,不管怎么调整,都不会因为div边界超出浏览器窗口而出现滚动条。

weinxin
关注微信
如有疑问,欢迎扫一扫左侧二维码添加微信好友进行咨询,我会第一时间回复您!
yglong

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: