响应式Web设计与CSS（下）

4.媒体类型与媒体查询

4.1 媒体类型

依据设备能力来分离样式的能力，始于媒体类型。

媒体类型用于针对特定的环境应用样式，包括屏幕显示、打印和电视等。

通过给link元素添加media属性，可以指定在哪些设备上应用相关样式。

<link rel="stylesheet" href="main.css" media="screen, print" />

在CSS文件中指定媒体类型：

@media print {
    .smallprint {
        font-size: 11pt;
    }
}

4.2 媒体查询

在link元素中，媒体查询可以这样写：

<link rel="stylesheet" href="main.css" media="screen and (min-width: 600px)" />

这样就声明了main.css应该用于屏幕媒体，而且媒体条件是视口至少600CSS像素宽。

同样的声明可以在CSS文件中通过@media规则写成如下格式：

@media screen and (min-width: 600px) {
    /* 这里写规则 */
}

width（以及min-width和max-width）是响应式Web设计的主打属性。

宽度之所以如此重要，是因为我们创建网页的默认方式就是水平布局最多只能跟视口一样宽。而在垂直方向上，可以让内容自动扩展，用户可以垂直滚动页面。因此，知道什么时候有多少水平空间可用于布局是非常必要的。

虽然查询视口的尺寸占据了媒体查询的绝大多数，但还可以查询其他设备特性。

几乎所有浏览器都已经支持了基本的媒体查询。

条件注释是IE直至（但不含）IE10都存在的一组特殊语法。在非IE浏览器中，条件注释就像正常的HTML注释一样，会被忽略掉。

<!-- [if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="oldIE.css" media="all">
<![endif]-->

5.响应式设计与结构化CSS

5.1 移动优先的CSS

移动优先，即在设计和开发中，先考虑移动设备。

以min-width查询作为主要工具，可以基于视口宽度渐进地应用调整。但是也不能忽略max-width查询。

body {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
}
h1,h2,h3 {
    font-family: 'Open Sans Condensed', 'Arial Narrow', Arial, sans-serif;
}
@media only screen and (min-width: 37.5em) {
    h1,h2,h3 {
        font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    }
}

这里换成max-width，代码量会减少。

body {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
}
@media only screen and (max-width: 37.5em) {
    h1,h2,h3 {
        font-family: 'Open Sans Condensed', 'Arial Narrow', Arial, sans-serif;
    }
}

5.2 媒体查询放在何处

涉及页面布局的媒体查询放在布局相关的规则附近，涉及调整网站组件中某些细节的媒体查询放在该组件样式规则附件。

媒体查询放在哪里，并没有固定位置。作为开发者，你可以按照自己团队和项目的需要来组织CSS代码。

6.几种响应式设计模式

6.1 响应式文本列

.multicol {
    column-width: 16em;
}

多栏文本在网页中应该尽量少用。

6.2 没有媒体查询的响应式Flexbox

无须使用媒体查询，Flexbox本身就可以创建出能够有效利用空间的适配布局。

相关阅读：CSS内容布局

6.3 响应式网格与网格模板区

相关阅读：CSS页面布局与网格（下）

7.响应式布局之外

7.1 响应式背景图片

<header class="profile-box" role="banner"></header>

.profile-box {
    height: 300px;
    background-size: cover; /* 在视口变大时，背景图片会自动变大 */
    background-image: url(img/small-cat.jpg);
}
@media only screen and (min-width: 600px) {
    .profile-box {
        height: 600px;
        background-image: url(img/big-cat.jpg);
    }
}

7.2 响应式嵌入媒体

响应式媒体基础：

img, object, video, embed {
    width: auto;
    max-width: 100%; /* 让元素变得可以伸缩，同时又不会超过其固有大小。 */
    height: auto;
}

7.3 响应式排版

屏幕大小不同，排版的基准尺寸也要相应调整。

一般来说，要将屏幕文字大小设置为20像素，才能让人感觉跟看书一样。

常见的情况是网页中的文字偏小。这通常代表了设计师或开发人员个人的喜好，而不是文本实际应有的可读性。

em、rem及视口单位（vw、vh、vmin和vmax）等相对长度的字体大小很适合不同屏幕间的适配。

几乎每个浏览器的用户样式表都会设置一个16像素的基准字体大小。基于em单位的媒体查询，就是以这个由浏览器设置的基准大小为参照值的。

基于像素字体大小很难实现自动适配的布局，而使用相对大小就可以让布局伸缩更容易。

参考资料：

• 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德