一、媒体查询：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
语法
1 @media mediatype and|not|only (media feature) { 2 CSS-Code; 3 }
实例
如果文档宽度小于 300 像素则修改背景颜色(background-color):
1 @media screen and (max- 300px) { 2 body { 3 background-color:lightblue; 4 } 5 }
关键字包括and-与，or（逗号）-或，not-非，only
not只到逗号位置有效
only 老旧浏览器解析到@media all/scree/print为止，后面的条件会被忽略，当针对某个设备应用媒体查询时，最好带上only
媒体属性最常用的4个，可添加min-或max-前缀
1.width：视口宽度
2.height：视口高度
3.device-width：渲染表面的宽度，就是设备屏幕的宽度
4.device-height：渲染表面的高度，就是设备屏幕的高度
二、视口（viewport）
- 布局视口（layout viewport）：先用虚拟的一个宽度将网页布局出来，这个视口大小不变
- 可视视口（visual viewport）：手机上呈现出的宽度，用户的缩放可改变其大小
- 理想视口（ideal viewport）：指布局视口在一个设备上的最佳尺寸
- 理想视口（ideal viewport）：指布局视口在一个设备上的最佳尺寸
举例：书的布局视口，手机像放大镜可以放大书的局部，手机屏幕就是可视视口
理想视口使用方法：
<meta name="viewport" content="width=device-width">
三、响应式网站设计原则
1、渐进增强和优雅降级
渐进增强 progressive enhancement ：先简单效果，再根据不同浏览器不同分辨率逐渐追加效果
优雅降级 greceful degradation ：先做到优雅的效果，在根据不同浏览器不同分辩率逐渐减少效果。
优雅降级更好，针对用户体验来说，思想是让老浏览器可以用，新的浏览器体验更好
2、根据用户使用比例来确定大小屏幕实现顺序
3、断点的选择
- 小屏幕：0-480px
- 中屏幕：481-800px
- 大屏幕：801-1400px
- 巨屏幕：1400+px