【css】响应式 Web 设计
响应式 Web 设计让你的网页能在所有设备上有好显示。
响应式 Web 设计只使用 HTML 和 CSS。
响应式 Web 设计不是一个程序或 Javascript 脚本。
以下内容学习自菜鸟教程
Viewport
viewport 是用户网页的可视区域。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
设置 Viewport
- width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
- height：和 width 相对应，指定高度。
- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
- user-scalable：用户是否可以手动缩放。
网格视图
使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。
响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。
创建响应式网格视图
我们可以使用行和列来制作网页
/*12 列的网格系统可以更好的控制响应式网页。首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/*
设置一个占3列的菜单div：
*/
它是响应式的，但在小屏幕上并不能友好的展示。
媒体查询可以帮我们解决这个问题。我们可以在设计稿的中间添加断点，不同的断点有不同的效果。
菜鸟教程(runoob.com)
Chania
The City
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
What?
Chania is a city on the island of Crete.
Where?
Crete is a Greek island in the Mediterranean Sea.
How?
You can reach Chania airport from all over Europe.
图片
width & max-width
如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能：
img {
width: 100%;
height: auto;
}
在以上实例中，图片会比它的原始图片大。我们可以使用 max-width 属性很好的解决这个问题。
如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小：
img {
max-width: 100%;
height: auto;
}
背景图片
背景图片可以响应调整大小或缩放。
- background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变
- background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域
- background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中
不同设备显示不同图片
大尺寸图片可以显示在大屏幕上，但在小屏幕上却不能很好显示。我们没有必要在小屏幕上去加载大图片，这样很影响加载速度。所以我们可以使用媒体查询，根据不同的设备显示不同的图片。
/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
可以使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小不会改变。
框架
响应式 Web 设计框架 Bootstrap
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
详情可移步菜鸟教程的Bootstrap 教程。