响应式设计(二)

媒体查询

响应式网页会基于设备的特征而变化。也就是说，你的响应式网页，需要在不同的设备上应用不同的样式。有几种办法可以有选择性的应用CSS代码，最简单的是使用 媒体查询。

媒体查询 提供了简单的逻辑方法，来根据不同的设备特征应用不同的样式，比如设备的宽度、高度或者像素比。你可以修改所有内容，从背景图片到页面布局，甚至其他的任何东西。

添加响应式样式很简单，在需要在你的页面里添加另外的样式表，并附上 媒体查询 :

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

/* patterns.css */
/* 屏幕宽带 大于300px 时应用下面这个样式 */
body {
    background-color: blue;
}

除了利用样式表链接的媒体查询属性，还有两种方式可以应用媒体查询，你可以在 @media 标签嵌入或者在 @import 标签嵌入

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

@import url("patterns.css") only screen and (min-width: 500px);

因为性能原因，你应该绝对避免使用 @import; 它是一个代价和优先级都非常高的标签

你需要权衡 CSS链接和 @media 的代价:

如果使用 CSS链接，你会有很多小文件，但是很多 HTTP 请求
如果使用 @media，HTTP 请求会少一些，但是文件都会变大

响应式网页设计中，最常用的媒体查询变量是 min-width 和 max-width；max-width 的规则是在视窗宽度小于其赋值时生效。min-width的规则是在视窗宽度大于其赋值时生效。

你还可以创建基于 min-device-width 或者 max-device-width 的媒体查询，但是这十分不推荐，它们的区别很细微，但却很重要。

min-width 是基于浏览器窗口大小的；min-device-width 是基于屏幕大小的；额外添加 device-width 变量可以防止在电脑或其他桌面设备上的网页内容随窗口大小而变化，因为这样的媒体查询是基于真实设备的尺寸的，而非浏览器窗口；另外一个原因是一些浏览器比如 Legacy 安卓浏览器可能返回错误的设备值。

断点

页面改变布局的那个点叫断点

要在哪设置断点？

根据你的内容来设置断点

一开始设置断点时，先在电脑浏览器上将窗口尺寸设置到最小，顺便打开 Chrome 的开发者工具，因为当改变窗口时，它会在右上角显示当前窗口的分辨率。接下来慢慢拉大窗口，仔细观察内容，看它什么时候需要断点

网格布局

网格布局的基本概念

动态网格系统中，有一些动态调整的纵列，当窗口变小时，它们会自动顺延到下一行，有很多不错的范例可供使用，比如 Bootstrap 或者 960px 网格布局系统，它们都非常易于使用，并且已经为你做好了一切准备工作。

弹性框 – Flexbox

Flexbox 是最好用的布局工具之一。

之所以功能强大，是因为它能够自动填充空白区域。如果一个元素周围出现了空白，它会自动填补上，而如果空间变得拥挤，它会缩小，直至占据最小空间

怎样用 Flexbox 实现设计？

display: flex
flex 的默认堆放方式为横向堆放；默认情况下 flex 项目会自动填充在一行内，所以无论将元素的宽度设为多少，它们都不会换行。相反，浏览器将其大小适应在视窗内，要改变这些，可以为元素添加 flex-wrap:wrap 语句，这是在告诉浏览器，可以允许内部的元素换行。
flexbox 另外一个很有用的特性，是 能够改变元素的次序，利用 CSS order 属性。比如以下 5个div 在浏览器窗口宽度大于 700px 时会根据 order 属性从小到大的顺序排列

@media screen and (min-width: 700px) {
    .dark_blue { order: 4; }
    .light_blue { order: 5; }
    .green { order: 2; }
    .orange { order: 3; }
    .red { order: 1; }
}

小练习

看以下图片，从左图设置成右图的布局

flex

答案：

header { width: 100%; order:1; }
.red { width: 50%; order: 2; }
.orange { width: 50%; order: 3; }
footer { width: 100%; order:4 }
.light_blue { width: 20%; order: 5; }
.dark_blue { width: 60%; order: 6; }
.green { width: 20%; order: 7; }