主页 > 人工智能 >

响应式布局学习笔记

人工智能
2025-09-03 19:51:03

什么是响应式布局？

响应式布局（Responsive Web Design）是一种网页设计方法，使网站能够根据设备屏幕尺寸（如手机、平板、电脑）自动调整内容和布局，提供最佳浏览体验。

如何调试响应式布局？

浏览器按F12打开开发者工具

点击开发者工具右上角的这个图标

之后便可以在上方调整页面大小并检查自己的页面了

核心实现技术 1. 视口设置

在HTML文件中添加以下<meta>标签，确保页面根据设备宽度缩放：

这个语句目的是告诉浏览器视口的宽度应该等于设备的屏幕宽度，确保内容能正确显示。

2. 媒体查询

通过CSS媒体查询针对不同屏幕尺寸应用不同样式：

/* 默认样式（移动优先） */ .container { padding: 10px; } /* 平板（≥768px） */ @media (min-width: 768px) { .container { padding: 20px; } } /* 桌面（≥1200px） */ @media (min-width: 1200px) { .container { max-width: 1140px; margin: 0 auto; } }

也就是说当屏幕大小小于768px时会应用第一个样式，而宽度大于768小于1200px则会应用第二个样式，大于1200px就用第三个。

此外，也可以使用PC优先的写法：

/* 默认样式（PC优先） */ .container { max-width: 1140px; margin: 0 auto; } /* 平板（≤1200px） */ @media (max-width: 1200px) { .container { padding: 20px; } } /* 手机（≤768px） */ @media (max-width: 768px) { .container { padding: 10px; } }

断点应如何选择呢：

这是常用响应式布局库bootstrap的方法，一般我们也可以通过这个标准来设定

3. Flex弹性布局（Flexbox）

详细教程可以看：Flex 布局语法教程 | 菜鸟教程

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

例如：

.container { display: flex; flex-wrap: wrap; /* 允许换行 */ gap: 20px; } .item { flex: 1 1 300px; /* 基础宽度300px，可伸缩 */ }

可让每个item元素根据屏幕大小自适应调整大小，从而适应不同的设备。

4. 网格布局（CSS Grid）

好看的教程：CSS Grid 网格布局教程 - 阮一峰的网络日志

还有：CSS 网格布局 | 菜鸟教程

可以通过网格布局让各个元素整齐排列在网页之中。

网格布在布局将网页分成一个个网格，通过排布元素在网格中的大小与位置，我们可以轻松实现如下的效果：

创建自适应网格系统：

.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } 实用小技巧相对单位绝对长度单位

像素，或 px，是 CSS 中最常见的长度单位之一，一般指屏幕上一个像素点的大小。

在 CSS 中，1 像素被定义为 1/96 英寸。所有其他的绝对长度单位都是基于这个像素的定义。

相对长度单位

rem

REM是CSS3新增的单位。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准。要想实现响应式布局，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。

与 em 的区别：

em：相对于父元素的字体大小rem：始终相对于根元素（也就是HTML元素）的字体大小

示例：用rem实现响应式

<!DOCTYPE html> <html lang="zh-CN">  <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .container { max-width: 120rem; margin: 0 auto; padding: 2rem; } .card { background: #f0f0f0; padding: 2.4rem; border-radius: 0.8rem; margin-bottom: 1.6rem; } h2 { font-size: 2.4rem; margin-bottom: 1.2rem; } p { font-size: 1.6rem; line-height: 1.5; } html { font-size: 62.5%; /* 因为浏览器默认字体为16px，所以此处 1rem = 10px */ } @media (max-width: 768px) { html { font-size: 50%; /* 1rem = 8px */ } .container { padding: 1rem; } } </style> </head> <body> <div class="container"> <div class="card"> <h2>响应式标题</h2> <p>这是一个使用 rem 单位实现的响应式文本示例</p> </div> </div> </body> </html>

vh/vw

vh和vw也是css3中新增的单位，他们分别是相对于视窗的高与视窗的宽设定的，1vh相当于视窗高的1%，相应的1vw相当于视窗宽的1%，此外还有vmin和vmax两个单位，分表示vh和vw中的最小值和最大值。

示例flex与vh/vw联合实现响应式布局

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .fullscreen-banner { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .content { width: min(90vw, 800px); padding: 5vh 3vw; background: #f0f0f0; border-radius: 1rem; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 3vh; } p { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.6; } @media (max-width: 768px) { .content { padding: 3vh 5vw; } } </style> </head> <body> <section class="fullscreen-banner"> <div class="content"> <h1>响应式视窗单位示例</h1> <p>这个元素会根据视口尺寸自动调整大小和间距</p> </div> </section> </body> </html> 响应式图片

srcset属性

srcset属性为图片的源提供替代路径，下面的例子中，宽度大于1200px时会用large.jpg来替代，宽度大于768px会用medium.jpg替代

而size属性的内容是指：如果视口宽度小于或等于768像素，图片将占据100%的视口宽度（100vw）；否则，图片将占据50%的视口宽度（50vw）。

<img src="small.jpg" srcset="large.jpg 1200w, medium.jpg 768w" sizes="(max-width: 768px) 100vw, 50vw" alt="示例图片" > 总结

要想实现响应式布局，我们要尽量综合应用上述方案，例如使用rem调整字体大小和元素宽度，用grid实现元素分部，再加上媒体查询等作为基础，来完成多设备适配，让网页兼具美观性与舒适性。

参考文章

前端响应式布局原理与方案（详细版）

前端实现响应式布局的几种方法_前端响应式布局-CSDN博客

CSS 单位指南：CSS em、rem、vh、vw 等详解

Flex 布局语法教程 | 菜鸟教程

前端笔记：媒体查询和响应式布局_媒体查询响应式布局-CSDN博客

标签：