响应式布局之css单位
1.css单位
CSS 有⼏种表⽰长度的不同单位。
许多 CSS 属性接受“长度”值,诸如 width、margin、padding、font-size 等。
长度是⼀个后⾯跟着长度单位的数字,诸如 10px、2em 等。常用css布局
css单位主要包含两部分:绝对单位和相对单位
绝对单位:就是元素的长度是固定的,不管是在那个平台上⾯都是⼀样的长度。不会随着平台的变化⽽⾃适应的变化出响应的长度
常见的绝对单位就是px
相对单位:就是元素的长度是根据另外⼀个长度变化⽽变化的。是动态的,当这个元素的长度变化的时候我们写的元素会随着这个元素的变化⽽做出相应的变化。最常见的就是相应式布局。相对长度单位在不同渲染介质之间缩放表现得更好。
常见的相对单位是:
em 相对于元素的字体⼤⼩(font-size)(2em 表⽰当前字体⼤⼩的 2 倍)
rem 相对于根元素的字体⼤⼩(font-size)
vw 相对于视⼝*宽度的 1%
vh 相对于视⼝*⾼度的 1%
% 相对于⽗元素
* 视⼝(Viewport)= 浏览器窗⼝的尺⼨。如果视⼝宽 50 ⾥⾯,则 1vw = 0.5cm。