CSS 响应式布局介绍 作者：马育民 • 2024-12-27 20:47 • 阅读：10009 # 介绍 响应式设计（Responsive Web Design，简称RWD）是一种Web设计方法，目的是让 **网页** 能够根据用户 设备的 **不同屏幕尺寸 和 分辨率**，**自适应地调整页面的 布局和内容**，**以提供最佳的用户体验**。 ### 例子 本网站就使用了响应式布局，当浏览器窗口宽度大于 `900px` 时，显示如下： > 主区域 和 右侧栏显示在一行  当浏览器窗口宽度小于 `900px` 时，显示如下： > 主区域 和 右侧栏 垂直显示  ### 应用场景 网页在 **不同设备** 上呈现 **内容** 和 **布局** ，能够 **自动调整**，**以适应屏幕的大小 和 方向**。 ### 实现方法 实现响应式设计的方法主要包括以下几种： - **媒体查询（Media Queries）** ：通过CSS3的媒体查询功能，可以根据 **不同的设备 屏幕尺寸 和 分辨率**，**应用 不同的样式规则**。例如，**当屏幕宽度小于某个值时，可以将某些元素隐藏或重新排列**。 - 百分比布局（Percentage-Based Layout） ：使用百分比来定义元素的宽度和高度，而不是固定像素值。这样可以使元素在不同屏幕尺寸下保持相对比例。 - **视窗单位（vw/vh）** ：视窗单位是基于视口大小的相对单位。`1vw` 等于视口宽度的 `1%`，`1vh`等于视口高度的`1%`。这种方法可以确保元素的大小与视口大小成比例。 - **相对单位（Rem）** ：使用相对单位（如rem）来定义字体大小和元素尺寸。rem单位是相对于根元素（通常是html标签）的字体大小。 - **弹性盒子布局（Flexbox）** ：弹性盒子布局是一种CSS布局模式，可以轻松实现响应式布局。通过设置父元素的display属性为flex，可以方便地控制子元素的排列和对齐方式。 - 流式布局（Fluid Layout） ：使用流式布局可以使页面元素在不同屏幕尺寸下自动调整大小和位置。通常结合百分比布局和媒体查询来实现。 参考： https://blog.csdn.net/m0_61505785/article/details/142893452 原文出处：http://malaoshi.top/show_1GWIY5vXJnz.html