视口单位:vw,vh,vmin,vmax(表示再也不想用rem了!)
百分比布局:
html, body { height: 100%; } .sidebar { height: 100%; width: 100%; }
为什么html
和body
需要高度?百分比是相对于其父属性。当父级的高度由它的子级定义时,没有已知的高度设置,因此高度被完全忽略。这意味着你必须在DOM树中的每个父元素上设置高度。你也可以使用新的视口单位。
视口单位:
vw
:1/100视口宽度vh
:1/100视口高度vmin
:宽和高最小边的1/100vmax
:宽和高最大边的1/100
直接在css中使用,如:10vw。
注:IE9使用vm
代替vmin
。它不支持vmax
。
澄清:1vmax
等于1vh
在纵向模式,而在横向模式下,1vmax
将等于1vw
。
个人建议:使用视口给元素设置宽高时,为了避免比例不协调,使用同一个单位比较好,如vmin、vmax。