【CSS进阶】常见的页面自适应的方法

在前端开发中，自适应布局（Responsive Design）是一种让网页能够适应不同屏幕尺寸、设备和分辨率的技术。常见的自适应布局方法包括 流式布局、弹性布局（Flexbox）、栅格布局（Grid）、媒体查询（Media Queries）、rem/vw/vh 等单位 以及 CSS 框架（如 Bootstrap）。

---

1. 媒体查询（Media Queries）

媒体查询 是 CSS 实现自适应布局的核心技术之一，允许根据屏幕尺寸、设备类型、分辨率等条件来应用不同的 CSS 样式。

示例：针对不同设备应用不同的 CSS

/* 默认样式：适用于大屏幕设备 */
body {
   
    font-size: 18px;
    background-color: lightblue;
}

/* 平板设备（屏幕宽度小于 1024px 时） */
@media screen and (max-width: 1024px) {
   
    body {
   
        font-size: 16px;
        background-color: lightgreen;
    }
}

/* 手机设备（屏幕宽度小于 768px 时） */
@media screen and (max-width: 768px) {
   
    body {
   
        font-size: 14px;
        background-color: lightcoral;
    }
}

原理：

• 当屏幕宽度小于 1024px 时，字体大小调整为 16px，背景变为绿色。
• 当屏幕宽度小于 768px 时，字体大小调整为 14px，背景变为红色。

适用场景：

• 适用于不同设备的 UI 适配，如 PC、平板、手机。
• 可以精细控制不同屏幕下的布局和样式。

---

2. 弹性布局（Flexbox）

Flexbox（弹性盒模型） 是 CSS3 提供的一种强大的布局方式，适用于一维（单行或单列）布局，能够自动调整子元素的大小和位置，以适应不同的屏幕尺寸。

示例：使用 Flexbox 让页面元素自动调整

.container {
    display: flex;
    flex-wrap: wrap;  /* 自动换行 */
    justify-content: space-between; /* 平均分布 */
}

.item {
    width: 30%;
    height: 100px;
    background-color: skyblue;
    margin: 10px;
    text-align: center;
    line-height: 100px;
    font-size: 18px;
}