CSS3媒体属性简介
| 属性 | 描述 |
| width | 视口宽度 |
| height | 视口高度 |
| device-width | 渲染表面的宽度，即设备屏幕的宽度 |
| device-height | 渲染表面的高度，即设备屏幕的高度 |
| orientation | 检查设备处于横向还是纵向 |
| aspect-ratio | 视口宽度和高度的宽高比，width / height 如：16 / 9，4 / 3 |
| device-aspect-radio | 渲染表面的宽高比 |
| color | 每种颜色的位数bits，如：min-color：16位，8位 |
| resolution | 检测屏幕或打印机的分辨率，如：min-resolution：300dpi |
关于viewport视口
视口分为布局视口、可视视口和理想视口
布局视口就是网页既定的宽度，不会改变。
可视视口会随着设备大小，用户缩放、拖动浏览器等操作不断改变。
用户在手机浏览器上查看网页的过程，就是缩放和滑动可视视口，显示布局视口不同部分的内容的过程。
理想视口是为了构建手机浏览器优化的页面而添加的，是布局适口在一个设备上的最佳尺寸，理想视口下的页面便于浏览器阅读和浏览。