HTML & CSS - 如何让页面成为响应式设计？

时间：2023-09-02 22:24:02 | 来源：网站运营

时间：2023-09-02 22:24:02 来源：网站运营

HTML & CSS - 如何让页面成为响应式设计？：现在的用户会用不同的设备来浏览同一个页面，所以如何让页面适应不同的屏幕尺寸是很重要的一件事。本文将会介绍如何让页面成为响应式设计。

文章的英文版请戳我的 Medium. To read the article in English, please visit my Medium.

---

1. 媒体查询 @media

1.1 媒体类型

媒体类型告诉浏览器这段代码使用在什么类型的媒体上的（例如印刷品或屏幕）。媒体类型可以指定为：

1. all： 适用于所有媒体类型。
2. print： 适用于打印预览模式。
3. screen： 适用于电脑屏幕、平板、手机等。
4. speech： 适用于读出页面内容的屏幕阅读器。

1.2 媒体特征规则

1. 宽和高： 为了让布局响应不同的屏幕尺寸，我们可以用宽（width、 min-width、 max-width）、高（height、 min-height、 max-height）和宽高比（aspect-ratio、 min-aspect-ratio、 max-aspect-ratio）。一旦屏幕尺寸满足了宽和高的规则，在其中定义的样式就会被应用。
2. orientation（朝向）： orientation 属性可以检测设备是 portrait （竖放，高 >= 宽）或 landscape （横放， 宽 >= 高）。
3. 像素（resolution、 min-resolution、 max-resolution）： 这个特征可以用来测试输出设备的像素密度。像素密度的单位是 dpi （每英寸点数），你可以用 DPI I love 或 DPI Checker 来查看你当前设备的像素密度。
4. 使用指点设备： hover 可以根据用户的主要输入机制是否可以在元素上悬停， any-hover 可以用来测试是否有任意可用的输入机制可以在元素上悬停，它们的值可以是 none （没有输入机制可以方便地悬浮，或不存在定点输入机制）或 hover （输入机制可以方便地在元素上悬浮）。这两个媒体特征适用于移动端和 PC 端通用一个按钮，但 PC 端需要一个悬停效果。 pointer 可以测试用户的主要输入机制是否拥有定点装置以及它的精确度， any-pointer 可以测试用户是否用于任意定点装饰以及它的精确度，它们的值可以是 none（没有可用的定点设备）、 coarse （有一个精度有限的定点装置） 或 fine （有一个精确的定点装置）。
5. prefers-color-scheme： prefers-color-scheme 可以检测用户是否有将系统的主题色设置为 light （亮色）或 dark （暗色）。

1.3 逻辑算符

为了将不同的媒体查询结合或是创建立查询列表，我们可以使用一些逻辑算符。

1. and： 结合多个媒体查询，需要每个媒体查询都返回 true。
2. not： 反转整个媒体查询的含义。⚠️ 如果用到了 not，需要同时定义一个媒体类型。
3. only： 只有整个查询符合时才会应用样式。 ⚠️ 如果用套了 only，需要同时定义一个媒体类型。
4. , （逗号）： 将多个媒体查询结合成一个用逗号分隔的列表，只要列表中的之中一个媒体查询返回 true，整个媒体查询就会返回 true。

1.4 媒体查询

现在，让我们来创建一些 CSS 媒体查询。

/* 屏幕宽度 >= 600px */@media screen and (min-width: 600px) { div { background: lightblue; }}/* 只在打印预览模式 */@media only print { h1 { font-size: 30px; }} 如果想要看更多关于媒体查询的示例代码，可以戳我的 CodePen。

可以用 CSS Media Queries 来查看当前设备满足的媒体查询。

引用

媒体查询入门指南 - 学习 Web 开发 | MDN

CSS Media Queries

找到Web：CSS 媒体查询（any-hover any-pointer）

---

2. 视口 <meta> 标签

视口时用户在页面中的可视区域。 HTML 有 name=viewport 的 <meta> 标签可以控制视口的尺寸。

我们在代码中最常见的视口 <meta> 标签是：

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 上面代码中告诉浏览器页面的宽度和设备宽度一致（通过 width=device-width），且设置页面初始加载的缩放比为 1 （通过 initial-scale=1.0）。

我们常见被放在 content 属性里的属性有：

1. width： width 属性设置了视口的宽度。它的值可以是一个特定的数字（1 到 10000 之间）或 device-width。
2. height： height 属性设置了视口的高度。它的值可以是一个特定的数字（1 到 10000 之间）或 device-height。
3. initial-scale： initial-scale 属性设置也页面初始加载的缩放比。它的值是 0.1 到 10 之间的特定数字。
4. minimum-scale： minimum-scale 属性设置了页面最小的缩放比。 它的值是 0.1 到 10 之间的特定数字。
5. maximum-scale： maximum-scale 属性设置了页面最大的缩放比。它的值是 0.1 到 10 之间的特定数字。
6. user-scalable： user-scalable 属性控制了页面是否允许放大和缩小的操作。它的值可以是 yes （允许放大和缩小的操作）或 no （不允许放大和缩小的操作）。

可以用 What is my viewport 查看你当前设备的视口数据。

如果想要更完整地了解视口 <meta> 标签，可以看看 MDN - Viewport meta tag 和 W3Schools - Responsive Web Design - The Viewport。

---

3. 响应式布局技术

3.1 弹性盒子布局

在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。

定义一个弹性盒子需要：

1. 将容器设置为 display: flex; 。
2. 设置弹性容器和元素的样式。

以下是一些用来设置弹性容器样式的常用属性：

1. flex-direction： flex-direction 属性定义了主轴的方向。它的值可以是 row （如果是 ltr 就是从左到右，如果是 rtl 就是从右到左）、 row-reverse、 column （如果是 ltr 就是从上到下，如果是 rtl 就是从下到上）或 column-reverse 。
2. flex-wrap： flex-wrap 属性指定了 flex 元素单行显示（no-wrap）还是多行显示（wrap 或 wrap-reverse）。
3. justify-content： justify-content 属性定义了如何分配顺着弹性容器主轴的元素之间及其周围的空间。它的值可以是 flex-start （根据 flex-direction 定义的方向，从行首开始排列） 、 flex-end、 center、 space-between （在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐）、 space-around （在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半）或 space-evenly （flex 项都沿着主轴均匀分布在指定的对齐容器中。相邻 flex 项之间的间距，主轴起始位置到第一个 flex 项的间距，主轴结束位置到最后一个 flex 项的间距，都完全一样）。
4. align-items： align-items 属性设置弹性项目在其包含块中在交叉轴方向上的对齐方式。

以下是一些用来设置弹性元素样式的常用属性：

1. flex-basis： flex-basis 属性指定了 flex 元素在主轴方向上的初始大小。
2. flex-grow： flex-grow 属性设置了 flex 项主尺寸的 flex 增长系数。
3. flex-shrink： flex-shrink 属性指定了 flex 元素的收缩规则。

<div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> <div class="flex-item">6</div></div>


.flex-container { width: 200px; border: 1px solid blue; display: flex; flex-wrap: wrap; justify-content: center;}.flex-item { width: 50px; height: 50px; background: pink; margin: 10px;} 如果想要看关于弹性盒子布局的示例代码，可以戳我的 CodePen - flex 和 CodePen - flex-flow。

如果想要更完整地了解弹性盒子布局，可以看看 MDN - CSS 弹性盒子布局和 CSS-TRICKS - A Complete Guide to Flexbox。

3.2 网格布局

网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。
一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。

定义一个网格布局需要：

1. 将容器设置为 display: grid;。
2. 设置网格容器和元素的样式。

以下是一些用来设置网格容器样式的常用属性：

1. grid-template： grid-template 是 grid-template-rows （基于网格行，定义网格线的名称和网格轨道的尺寸大小）、 grid-template-columns （基于网格列，定义网格线的名称和网格轨道的尺寸大小）和 grid-template-areas （网格区域在 CSS 中的特定命名）属性的简写属性。
2. gap： gap 是 row-gap （设置行元素之间的间隙大小）和 column-gap （设置元素列之间的间隙大小）属性的简写属性。
3. justify-items： justify-items 属性定义了元素沿行轴线的对齐方式。它的值可以是 start （与单元格的起始边缘对齐所有项）、 end、 center 或 stretch （填满单元格的全部宽度）。
4. align-items： align-items 属性定义了元素沿列轴线的对齐方式。它的值可以是 start、 end、 center、 stretch 或 baseline。

以下是一些用来设置网格元素样式的常用属性：

1. grid-column： grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性，通过 <start-line> / <end-line> 定义了网格元素的位置。
2. grid-row： grid-row 是 grid-row-start 和 grid-row-end 属性的简写属性，通过 <start-line> / <end-line> 定义了网格元素的位置。
3. grid-area： grid-area 属性定义了网格元素的名字，这样 grid-template-area 属性可以通过这个名字引用这个元素。

<div class="grid-container"> <div class="grid-item1">1</div> <div class="grid-item2">2</div> <div class="grid-item3">3</div></div>


.grid-container { display: grid; border: 1px solid red; padding: 10px; grid-template: "a a ." 50px "a a ." 1fr ". b c" 70px ". b ." 20px / 150px 1fr 50px; /* grid-template-rows: 50px 1fr 70px 20px; grid-template-columns: 150px 1fr 50px; grid-template-areas: "a a ." "a a ." ". b c" ". b ."; */}.grid-item1 { grid-area: a; background: lightblue;}.grid-item2 { grid-area: b; background: orange;}.grid-item3 { grid-area: c; background: lightgreen;} 想要看更多关于网格布局的示例代码，可以戳我的 CodePen - grid-template、 CodePen - grid-area, grid-column, grid-row 和 CodePen - grid。

如果想要更完整地了解网格布局，可以看看 MDN - 网格和 CSS-TRICKS - A Complete Guide to CSS Grid。

3.3 多列布局

定义多列布局并对它们应用样式可以用到以下属性：

1. columns： columns 是 column-count （定义元素的列数）和 column-width （定义每一列的理想宽度）属性的简写属性。
2. column-gap： column-gap 属性设置了元素列之间的间隔大小。
3. column-rule： column-rule 是 column-rule-width （设置两列之间的线条宽度）、 column-rule-style （设置两列之间的线条样式）和 column-rule-color （设置两列之间的线条颜色）属性的简写属性。

.article { columns: 3; /* column-count: 3; */ column-rule: 3px dotted blue; /* column-rule-width: 3px; column-rule-style: dotted; column-rule-color: blue; */ column-gap: 20px;} 如果想看更多关于多列布局的示例代码，可以戳我的 CodePen。

如果想要更完整地了解多列布局，可以看看 MDN - 多列布局。

---

4. 响应式排版

我们最常用的长度单位就是 px， 是浏览器中准确的绝对长度单位。响应式排版会使用到相对长度单位让长度可以响应不同的字体大小或视口大小。

以下是一些我们最常用的相对长度单位：

1. em： 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小。
2. rem： 根元素的字体大小。
3. vw： 视窗宽度的 1%。
4. vh： 视窗高度的 1%。

如果想看关于相对长度单位更多的示例代码，可以戳我的 CodePen。

这里有一些把 px 转化为 rem 的有效工具：

1. PX to REM converter
2. px to rem （Visual Studio Code 插件）
3. px to rem & rpx & vw (cssrem) （Visual Studio Code 插件）

---

5. 响应式图片

为了让给你图片可以适配各种不同的屏幕以及设备，运用响应式图片必不可少。

5.1 使用 HTML srcset 属性或 CSS image-set() 函数

<img> 标签支持 srcset 属性来为不同像素的设备加载不同的图片资源。

srcset 属性的值是以逗号分隔的一个或多个字符串，每一个字符串的组杭州是：

1. 图片文件路径
2. 可选地，一个空格之后，附加以下的其一：
1. 一个宽度描述符（一个正整数后面紧跟字母 w）。该整数宽度处以 sizes 属性给出的资源大小来计算得到的有效的像素密度，即换算成和 x 描述符等价的值。
2. 一个像素密度描述符（一个正浮点数后面紧跟字母 x）。 你可以用 JavaScript 的 window.devicePixelRatio 来查看你设备的像素密度。

<img src="https://www.shareicon.net/data/512x512/2016/06/01/576694_background_600x600.png" srcset="https://www.shareicon.net/data/64x64/2016/06/01/576694_background_600x600.png, https://www.shareicon.net/data/256x256/2016/06/01/576694_background_600x600.png 1.5x, https://www.shareicon.net/data/512x512/2016/06/01/576694_background_600x600.png 2x" alt="Blue Background"/>CSS 的 image-set() 函数让浏览器从一组图片资源中选择最合适当前像素屏幕的图片。

.image { width: 100px; height: 100px; background-image: image-set( url("https://www.shareicon.net/data/64x64/2016/06/01/576694_background_600x600.png") 1x, url("https://www.shareicon.net/data/256x256/2016/06/01/576694_background_600x600.png") 1.5x, url("https://www.shareicon.net/data/512x512/2016/06/01/576694_background_600x600.png") 2x);}

5.2 使用 HTML srcset 和 sizes 属性

把 srcset 和 sizes 属性结合，我们可以定义在不同的屏幕下哪张图片会是最适合被展示的。

sizes 属性的值是以逗号分隔的一个或多个字符串，每一个资源大小包括：

1. 一个媒体条件。最后一个资源大小的媒体条件一定是被忽略的。
2. 一个资源尺寸的值。

<img src="https://www.shareicon.net/data/512x512/2016/06/01/576694_background_600x600.png" srcset="https://www.shareicon.net/data/64x64/2016/06/01/576694_background_600x600.png 100w, https://www.shareicon.net/data/256x256/2016/06/01/576694_background_600x600.png 200w" sizes="(max-width: 600px) 100px, 200px" alt="Blue Background"/>

5.3 用 CSS padding 和 background 属性来按宽高比来裁剪图片

一个需求常常会要求你按照一定的宽高比来裁剪图片，一种实现方式就是使用 CSS padding 和 background 属性。

<div class="image-continer"> <!-- 1:1 --> <div id="one-to-one"/></div><div class="image-container"> <!-- 3:4 --> <div id="three-to-four"/></div><div class="image-container"> <!-- 4:3 --> <div id="four-to-three"/></div>


.image-container { width: 200px;}/* 1:1 */#one-to-one { width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; background: url(https://www.androidfreeware.net/img2/com-aestheticwallpaper-girlywallpaper-cute-panda-butterflies-kawaii-offlinewallpaper.jpg) center / cover no-repeat;}/* 3:4 */#three-to-four { width: 100%; height: 0; padding-bottom: 133.33%; overflow: hidden; background: url(https://www.androidfreeware.net/img2/com-aestheticwallpaper-girlywallpaper-cute-panda-butterflies-kawaii-offlinewallpaper.jpg) center / cover no-repeat;}/* 4:3 */#four-to-three { width: 100%; height: 0; padding-bottom: 75%; overflow: hidden; background: url(https://www.androidfreeware.net/img2/com-aestheticwallpaper-girlywallpaper-cute-panda-butterflies-kawaii-offlinewallpaper.jpg) center / cover no-repeat;}按比例展示图片：因为按照百分比来设置 CSS padding 属性的值时，百分比是相对于包含款的宽度，所以我们将宽度 width 设置成了想要的值，并将高度 height 设为了0，然后我们可以根据指定的宽高比将 padding 属性设置成相应的百分比值。

裁剪图片：因为我们使用了 <div> 标签来展示图片，所以图片资源被放在了 background 属性里。我们可以使用 background-size 和 background-position 属性来定义我们想展示图片的哪一部分。

5.4 用 CSS aspect-ratio 和 object-fit 属性来按宽高比来裁剪图片

另一种实现按宽高比裁剪图片的方式就是使用 CSS aspect-ratio 和 object-fit 属性。aspect-ratio 属性允许我们将图片规定为任何纵横比，而 object-fit 属性允许我们在宽高比内展示图片的任何部分。

<!-- 16:9 --><img id="sixteen-to-nine" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80" />


/* 16:9 */#sixteen-to-nine { width: 200px; aspect-ratio: 16 / 9; object-fit: cover;}如果想要更完整地了解这两个属性，可以看看 MDN - aspec-ratio 和 MDN - object-fit。

引用

响应式图片 - 学习 Web 开发 | MDN

https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/

Responsive Images Done Right: A Guide To <picture> And srcset — Smashing Magazine

html中如何让图片按比例响应式缩放、并自动裁剪的css技巧_51CTO博客_html设置图片按比例缩放

---

6. 响应式框架

线上也有很多响应式框架可以直接引用进你的项目中啦～

1. Bootstrap
2. Foundation
3. Skeleton
4. UIkit
5. Bulma
6. Semantic UI
7. Materialize
8. MUI (Material UI)