响应式布局（Responsive Layout）和自适应布局（Adaptive Layout）-CSDN博客

本文链接：https://blog.csdn.net/m0_62747565/article/details/136471944

是用于实现在不同设备上呈现网页内容的两种常见方法。

响应式布局：响应式布局是一种设计和开发网页的方法，使得网页能够根据用户设备的屏幕尺寸和分辨率做出相应的调整，以提供最佳的用户体验。响应式布局通常使用 CSS 媒体查询来针对不同的屏幕尺寸应用不同的样式。通过响应式设计，网页可以在桌面电脑、平板电脑和手机等各种设备上自动调整布局和元素大小，以确保内容清晰可读、布局合理。

响应式布局：

c s s：
/* 响应式布局样式 */
@media screen and (max-width: 768px) {
    /* 在小屏幕上隐藏侧边栏 */
    aside {
        display: none;
    }
}

/* 其他样式 */
header { ... }
nav { ... }
section { ... }
aside { ... }
footer { ... }
上述代码中，通过使用媒体查询（media queries），我们可以根据屏幕宽度来应用不同的 CSS 样式。在小屏幕上，我们将侧边栏设置为不显示。

自适应布局：自适应布局是指根据用户设备的特定宽度范围来调整网页布局和元素大小，而不是根据设备的具体分辨率。自适应布局通常会定义几个固定的布局尺寸，当用户设备的宽度落在这些尺寸范围内时，网页会选择最匹配的布局进行展示。这种方式相比响应式布局更为固定，但仍然能够适应多种设备尺寸。

自适应布局：

HTML 结构：
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="sidebar">...</div>
        <div class="main-content">...</div>
    </div>
</body>
</html>
CSS 样式（styles.css）：
/* 自适应布局样式 */
.container {
    display: flex;
    flex-wrap: wrap;
}

.sidebar {
    width: 25%;
    /* 其他样式 */
}

.main-content {
    width: 75%;
    /* 其他样式 */
}

/* 其他样式 */
在上述代码中，我们使用了 CSS 的 flexbox 布局来实现自适应布局。.container 是一个容器，在大屏幕上会以行的方式显示 .sidebar 和 .main-content，而在小屏幕上则会垂直堆叠显示。

还是会有疑惑？？？

自适应布局（Adaptive Layout）：

特点：

使用固定的布局尺寸点，在这些点上设计不同的布局。
针对特定设备宽度范围设计布局。
网页会在设备宽度达到预定义的点时切换布局。

例子：

当设备宽度小于 600px 时，显示一种布局；当宽度在 600px 到 900px 之间时，显示另一种布局。

响应式布局（Responsive Layout）：

特点：

使用流体网格系统和媒体查询，使页面在不同设备上自动调整布局。
不限制于特定的布局尺寸点，可以随着设备宽度的变化而平滑调整布局。

例子：

使用百分比单位或弹性布局，使元素根据视口大小自动调整布局。
使用媒体查询根据设备特性应用不同的样式。

区别总结：

自适应布局是根据固定的布局尺寸点来切换不同布局，而响应式布局是根据设备属性实时调整布局。
自适应布局相对刚性，布局在特定点上切换，而响应式布局更为灵活，布局能够平滑过渡。
自适应布局更侧重于针对特定设备宽度设计布局，响应式布局更侧重于为各种设备提供一致的用户体验