响应式布局学习笔记
什么是响应式布局？
响应式布局（Responsive Web Design）是一种网页设计方法，使网站能够根据设备屏幕尺寸（如手机、平板、电脑）自动调整内容和布局，提供最佳浏览体验。
如何调试响应式布局？
-
浏览器按F12打开开发者工具
-
点击开发者工具右上角的这个图标
-
之后便可以在上方调整页面大小并检查自己的页面了
核心实现技术
1. 视口设置
在HTML文件中添加以下<meta>标签，确保页面根据设备宽度缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这个语句目的是告诉浏览器视口的宽度应该等于设备的屏幕宽度，确保内容能正确显示。
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">
<!--- 浏览器默认16px 62.5%就是10px --->
<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博客