对于CSS Media媒体查询的理解

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视口

视口分为布局视口、可视视口和理想视口

布局视口就是网页既定的宽度，不会改变。

可视视口会随着设备大小，用户缩放、拖动浏览器等操作不断改变。

用户在手机浏览器上查看网页的过程，就是缩放和滑动可视视口，显示布局视口不同部分的内容的过程。

理想视口是为了构建手机浏览器优化的页面而添加的，是布局适口在一个设备上的最佳尺寸，理想视口下的页面便于浏览器阅读和浏览。