第7章 响应式网页

第7章 响应式网页

本章要内容包括：

通过本章的学习，掌握响应式网页设计的基本知识，学会使用媒体查询对特定的设备应用特定的CSS样式，学会使用弹性布局实现灵活的自适应布局，并掌握图像自适应缩放和图像媒体查询的实现方法。

响应式网页设计是由多种技术构成的设计方法，可以让网页适配于手机、平板和桌面电脑等不同的终端设备。本章介绍响应式网页设计的相关技术，包括媒体查询、弹性布局、响应式图像等。

1、响应式网页设计的概念

响应式网页设计的概念最早由Ethan Marcotte在2010年提出。目前人们提到响应式网页，总会提到Ethan Marcotte使用《福尔摩斯历险记》中六个主人公的头像做的响应式网页的案例。

响应式网页就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

相关技术有：媒体查询、弹性布局、响应式图像

2、视口Viewport

在手机和平板设备出现之前，设计网页时主要面向PC端的浏览器，因此经常采用固定宽度的布局。在手机和平板设备出现之后，为了显示原先为PC端设计的网页，因此手机和平板设备中的浏览器在默认情况下会自动把网页缩小以进行完整显示。

但是我们通过媒体查询、弹性布局、响应式图像实现的响应式网页，并不需要手机和平板设备中的浏览器对网页进行缩小的处理。因此，HTML5中引入了<meta> viewport元素来控制浏览器的行为：

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

表示：设置当前视口的宽度等于设备的宽度，同时页面的初始缩放值为1.0。

3、媒体查询

通过使用媒体查询，可以针对特定的输出设备应用特定的CSS样式。媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。

通过内部样式实现媒体查询

@media media type and|not|only (media feature) {

    CSS样式;

    …

}

通过link元素实现媒体查询

<link rel="stylesheet" media="media type and|not|only(mediafeature)"href="stylesheet.css">

媒体类型media type

“media condition”由1个或多个媒体特性“media feature”构成。媒体特性与CSS属性类似，形式如“特性名称:特性值”。可以检测的浏览器特性包括设备的视口宽度、视口高度、分辨率、横屏模式还是竖屏模式等。并且，通过与“min-”或“max-”前缀的组合，可以表达“最低”或者“最高”的查询。

通过对不同断点（break point）的组合检测，即可以实现根据设备的视口宽度分别应用不同的CSS样式，从而实现不同的页面布局。

4.弹性布局Flexbox

采用Flexbox弹性布局的元素，称为flex容器（flex container）或者弹性容器。它的所有直接子元素自动成为容器成员，称为flex项目（flex item）或者弹性元素。

flex容器属性

flex项目属性

5、响应式图像、视频

图像、视频自适应缩放可以使得图像、视频能够随着所在的容器自动缩放，基本方法类似：不再设置img元素或video元素的width属性和height属性，而是通过CSS中width为“100%”、以及CSS中height为“auto”的设置，使得宽度缩放为所在容器的宽度，高度等比例缩放。

img{

    width: 100%;

    height: auto;

}

video {

    width: 100%;

    height: auto;

}