4.媒体类型与媒体查询
4.1 媒体类型
依据设备能力来分离样式的能力，始于媒体类型。
媒体类型用于针对特定的环境应用样式，包括屏幕显示、打印和电视等。 通过给link元素添加media属性，可以指定在哪些设备上应用相关样式。 在CSS文件中指定媒体类型：
@media print { .smallprint { font-size: 11pt; }} 4.2 媒体查询
在link元素中，媒体查询可以这样写：
这样就声明了main.css应该用于屏幕媒体，而且媒体条件是视口至少600CSS像素宽。
同样的声明可以在CSS文件中通过@media规则写成如下格式： @media screen and (min-width: 600px) { /* 这里写规则 */} width（以及min-width和max-width）是响应式Web设计的主打属性。
条件注释是IE直至（但不含）IE10都存在的一组特殊语法。在非IE浏览器中，条件注释就像正常的HTML注释一样，会被忽略掉。
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本身就可以创建出能够有效利用空间的适配布局。
相关阅读：6.3 响应式网格与网格模板区
相关阅读：
7.响应式布局之外
7.1 响应式背景图片
.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》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德