【响应式布局】

Css3分页

响应式 Web 设计 - Viewport

响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

viewport 是用户网页的可视区域。

viewport 翻译为中文可以叫做"视区"。

设置 Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

配置可视区 width=device-width：宽度：设备宽度

              `initial-scale=1.0"` 设备缩放比例

响应式 Web 设计 - 网格视图

网格视图：把整个100%宽度平均分成12份，使用网格布局时，可以按照12的多少份按比例布局，每份占8.33的比例

设置所有元素的box-sizing：border-box；保证盒子的宽度比例不变

响应式 Web 设计 - 媒体查询

@media only mediatype and|not (media feature) {
    CSS-Code;
}

**and关键词:**表示同时满足两个条件时生效，到达限定范围

**only关键词:**指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器

**not关键词:**用于排除某种指定的媒体类型，即排除符合表达式的设备

响应式 Web 设计 - 图片

使用 width 属性

如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能：

img {
    width: 100%;
    height: auto;
}

使用 max-width 属性

如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小：

img {
    max-width: 100%;
    height: auto;
}

背景图片

背景图片可以响应调整大小或缩放。

1. 如果 background-size 属性设置为 “contain”,背景图片将按比例自适应内容区域，按原图比例缩放。
2. 如果 background-size 属性设置为 “100% 100%” ，背景图片将延展覆盖整个区域
3. 如果 background-size 属性设置为 “cover”，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

(4)、不同设备显示不同图片

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');
    }
}