width
相对于父元素的宽度，注意这里以及以下父元素是指css中其父元素。而不是一般的DOM结构中父元素。
height
一般是相对于父元素的高度，但是当父元素高度没有指定时候其值会变成 auto。
使用vh vw来做页面适配
vw vh 概念
vw 即viewport width 的简写，意思是屏幕的宽度。100vw等于屏幕宽度。
vh 即viewport height 的简写，意思是屏幕的高度。100vh等于屏幕高度。
vmax vmin
vmax 即 vw 和 vh 中比较大的那个。
vmmin 即 vw 和 vh 中比较小的那个。
浏览器兼容性
页面适配思路
同 rem 做页面适配相似。这里 10vw 等于十分之一屏幕宽度，和这篇文章中使用rem来做页面适配 1rem 等于 10vw。
剩下的不变，而且不需要js判断来更改根元素的字体大小。
使用media query 实现响应式布局
media query 概念
media query 即是媒介查询，可以根据浏览器的不同特性来应用不同的css样式。
例如：
1 | <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> |
或者
1 | <style type="text/css" media="screen"> |
以下我只讨论使用 screen 特性
media query screen
例子
例如
1 | <link rel="stylesheet" href="style.css" media="screen and (min-width:640px) and (max-width:1080px)"> |
或者
使用rem来做页面适配
CSS3 3D立方体
演示
新窗口打开
思路
首先需要给这个正方体的父容器设置 transform-style 属性为 preserve-3d 这样才能保证子元素是在一个三位空间内，再给父元素的 position 设置为 relative，然后给子元素正方体这6个面改变角度和位置使其在正确的位置并更改其 positon 为 absolute 相对于父元素定位。
改变角度和位置都使用 transform 属性，之后在三维坐标系通过 rotate3d() 改变角度，通过 translate3d() 改变位置。就ok了。
tips 微信目前无法展示此效果，请选择使用浏览器打开。
代码
html
1 | <div class="container"> |