响应式笔记（1）

一、媒体查询：媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

语法

1 @media mediatype and|not|only (media feature) {
2     CSS-Code;
3 }

实例

如果文档宽度小于 300 像素则修改背景颜色(background-color):

1 @media screen and (max-width: 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