《HTML5+CSS3 Web开发案例教程》课件——第14章 响应式布局.pptxVIP

HTML5+CSS3 2021.6

HTML5andCSS3

第14章响应式布局

响应式概述

弹性布局

媒体查询（@media）

DEMO（用网格布局实现响应式）

断点

DEMO（实现Boostrap响应式栅格系统）

元视口标签（viewport）

DEMO

弹性媒体

DEMO（仿苹果官网的响应式页头）

第14章响应式布局

第14章响应式布局

响应式概述

在Web设计的早期，页面是针对特定屏幕尺寸而构建的，比如早期非常普遍的显示器分辨率是1024x768px。如果用户的屏幕小于或大于设计者的预期，则会出现滚动条或者无法充分利用空间。

特别是随着智能手机的普及，出现了越来越多的设备和屏幕尺寸，比如手机、平板电脑、笔记本和台式机等，这样就出现了“响应式”网页设计的概念，这是一系列支持网页更改其布局和外观以适应不同的屏幕宽度和分辨率等的做法。

响应式设计不是一个单独的技术，它是一种理念，是一种网页设计和开发方法，CSS提供了一系列的规则来支撑这种设计。响应式网页设计主要分为三个部分，包括弹性布局，媒体查询和弹性媒体。

第14章响应式布局

弹性布局

“弹性布局”是一种使用“弹性网格”构建网页布局的实践，该网格能够动态调整为任意宽度，网格内部的内容随着宽度的变化而变化，不会超出边界。弹性网格是使用相对长度单位（通常为百分比）构建的。

弹性布局不主张使用固定的度量单位，例如像素或英寸。原因是，视口的高度和宽度会在设备之间不断变化。网页布局需要适应这种变化，固定值有太多限制。

我们可以运用一个简单的公式，计算出灵活布局的比例。换算公式是：目标元素宽度÷父元素宽度=相对百分比。

第14章响应式布局

媒体查询（@media）

响应式设计中最重要的技术是媒体查询（mediaquery），它是CSS样式的过滤器，可以轻松地根据设备类型或该设备的功能（例如宽度，高度，方向，悬停能力，触摸）来更改样式。

媒体查询以@media开头，然后由可选的媒体类型和任意数量的媒体功能表达式组成，当设备符合这些条件时就会应用相应的样式，即覆盖原有的样式。

第14章响应式布局

DEMO：用网格布局实现响应式

用Grid实现圣杯布局

第14章响应式布局

断点

响应式设计经常会遇到一个术语——断点。断点是确定何时更改布局并在媒体查询中调整新规则的关键。

最常见的问题之一是“应该使用哪个断点”。市场上有大量设备，因此我们不能也不应为每个设备定义固定的断点。但是我们可以设置一些常用的断点，来支持大多数设备。一些前端框架（例如Bootstrap）也是这么做的。

根据常用的设备，我们可以大致定义出一些常见断点：

320px—768px：小屏幕，手机

769px—1024px：中屏幕，平板电脑

1025px—1200px：大屏幕，笔记本

1201px及以上：超大屏幕，大显示器

第14章响应式布局

动手练习：实现Boostrap响应式栅格系统

本案例使用两个断点显示三个设备：

小型设备，小于768px

中型设备，大于等于768px，且小于1200px

大型设备，大于1200px

断点

CSS类中缀

宽度

特小

无

576px

小

sm

≥576px

中

md

≥768px

大

lg

≥992px

特大

xl

≥1200px

第14章响应式布局

DEMO

第14章响应式布局

元视口标签（viewport）

除了媒体查询外，响应式布局还有一个关键的设置，即元视口（viewport）标签。

元视口标签为浏览器提供了有关如何控制页面尺寸和缩放比例的说明。为了尝试提供最佳体验，移动浏览器会以桌面屏幕宽度（通常是980px，设备之间会有所不同）来呈现页面，然后尝试通过增加字体大小或缩放内容的手段，使得页面能够适合屏幕，让网页内容看起来更好。

元视口的值width=device-width会指示页面匹配屏幕的宽度，这个宽度的单位是设备独立像素（DIP，又称设备无关像素）。

第14章响应式布局

元视口标签（viewport）

initial-scale=1，它指定浏览器在CSS像素和与设备无关的像素之间建立1：1关系，而与设备方向无关，并允许页面利用整个横向宽度。

其他属性说明

属性

说明

width

设置layoutviewport的宽度，为一个正整数，或字符串width-device

initial-scale

设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale

允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale

允许用户的最大缩放值，为一个数字，可以带小数

height

设置layoutviewport的高度，这个属性对我们并不重要，很少使用

us