《响应式Web设计-HTML5和CSS3实战》阅读笔记第二章

概要

---

总结

一、使用媒体查询

1、浏览器支持

目前媒体查询广泛使用且各浏览器支持，IE9+、Chrome4+、Firefox3.6+、老版本IE678可通过JS兼容修复。

2、为什么需要媒体查询

CSS3的媒体查询可以针对设备特性（视口宽度）设置特定的CSS样式。
官方定义：媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。使用媒体查询可以在不改变页面内容的情况下为特定的输出设备定制显示效果。

3、媒体查询语法

/*不同视口宽度不同背景色*/
body {
    background-color: grey;
}

@media screen and (max-width: 960px) {
    body {
        background-color: red;
    }
}

@media screen and (max-width: 768px) {
    body {
        background-color: orange;
    }
}

@media screen and (max-width: 550px) {
    body {
        background-color: yellow;
    }
}

@media screen and (max-width: 320px) {
    body {
        background-color: green;
    }
}

<!--视口为浏览器且宽度最小不超过800-->
<link rel="stylesheet" media="screen and (min-width:800px)" href="css/web.css"/>
<!--视口为浏览器且宽度最大不超过320或550-->
<link rel="stylesheet" media="screen and (max-width:320px),screen and (max-width:550px)" href="css/mobile.css"/>

/*在CSS中导入*/
@import url("mobile.css") screen and (max-width:320px),screen and (max-width:550px);

（使用这种方法加载了mobile.css，但没有应用里面的样式。有大神知道是什么问题的话请指教。）

4、媒体查询能检测哪些特性

• 视口宽高：width,height
• 设备屏幕宽高：device-width,device-height
• 设备横向还是纵向：orientation
• 基于视口的宽高比：aspect-ratio（16/9）
• 基于设备渲染平面宽高比：device-aspect-ratio
• 颜色、索引表中的颜色数：color,color-index
• 检测单色帧缓冲区中每像素的位数：monochrome
• 屏幕或打印机的分辨率：resolution
• 电视机的扫描方式：scan（逐行扫描progressive，隔行扫描interlace）
• 输出设备是网格还是位图：grid
• 以上特性除scan和grid之外都可以使用min和max前缀来表示一个范围

5、媒体查询设计思路

开头设置基本样式，适用所有设计，然后使用媒体查询进一步重写相应部分

6、加载媒体查询的最佳方法

浏览器可以自动忽略不匹配的样式文件，但却不一定不下载，尽量减少独立的文件。
Respond.js是为IE8及以下增加媒体查询支持的最快的JS工具（无法解析@import）。

二、第一个响应式设计

1、固定宽度的设计

理论上最好是从最小的屏幕渐进增强，但目前大多数的需求是将桌面网页版的修改成响应式的，所以从宽度下手比较合适。
这也导致固定宽度在小视口下内容会被剪切。

2、保证图片尽可能的精简

要支持移动设备上显示就需要考虑大小、性能等问题，图片的精简不可或缺。

3、阻止移动浏览器自动调整页面大小

在移动浏览器中，网页会根据内容自动绽放比例，这样会使我们的媒体查询失效。
所有IOS、Android浏览器都基于WebKit，使用meta可以控制缩放。

<!--按视口实际尺寸显示，缩放1倍-->
<meta name="viewport" content="initial-scale=1.0",width=device-width" />
<!--按视口实际尺寸显示，禁止缩放-->
<meta name="viewport" content="user-scalable=no,width=device-width" />
<!--最大放大3倍，最小缩小一半-->
<meta name="viewport" content="maximum-scale=3,minimum-scale=0.5" />

4、针对不同视口宽度修正设计

当固定宽度、禁移动浏览器设备绽放后我们需要做是就是根据不同视口宽度修正布局和设计。

5、内容始终优先

不要在修改布局时忽略了你要显示的主要内容。

6、媒体查询只是必要条件之一

媒体查询修改宽度只能实现自适应设计，要使用内容更加灵活的话需要流动布局