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视口
视口分为布局视口、可视视口和理想视口
布局视口就是网页既定的宽度,不会改变。
可视视口会随着设备大小,用户缩放、拖动浏览器等操作不断改变。
用户在手机浏览器上查看网页的过程,就是缩放和滑动可视视口,显示布局视口不同部分的内容的过程。
理想视口是为了构建手机浏览器优化的页面而添加的,是布局适口在一个设备上的最佳尺寸,理想视口下的页面便于浏览器阅读和浏览。