width
相对于父元素的宽度，注意这里以及以下父元素是指css中其父元素。而不是一般的DOM结构中父元素。
height
一般是相对于父元素的高度，但是当父元素高度没有指定时候其值会变成 auto。
viewport详解
viewport概念
viewport 是一个移动专属的 meta 值，用于设定“视窗口”的各种行为。
因为css中的1px往往不等于移动设备中的1px，因为移动设备像素密度越来越高，所以后来就有移动设备上2px表示css中1px。例如 iphone5 的屏幕像素宽度是640px，在css中既是320px。
总之 viewport 就像一个容器把原本比较大的屏幕挤到特定大小。
viewport 属性
viewport一般形式如下
1 | |
其中content 内容为其属性。
利用手机姿态使用websocket控制客户端css长方体姿态
前言
我之前有篇文章写了利用deviceorientation事件获取手机姿态。既然可以获取手机在三位空间内的与坐标轴角度，也就可以通过这来控制网页中css长方体的姿态。至于在两个网页/客户端传输数据，当然是用websocket最好了。这里刚好我之前做过两个小demo关于这个。
思路
这个 Demo 分为客户端，控制端和服务端。客户端是一个用css3写的三维的长方体，只接受websocket数据。
使用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"> |