网页适配的 CSS 写法

推测你想问的是网页适配的 CSS 写法。下面给出几种常见的网页适配方法及其示例代码。

1. 媒体查询（Media Queries）

媒体查询是响应式设计中最常用的方法，它允许你根据不同的屏幕尺寸应用不同的 CSS 规则。

/* 小屏幕设备（手机，小于 768px） */
@media only screen and (max-width: 767px) {
    body {
        font-size: 14px;
    }
    .container {
        width: 100%;
        padding: 0 15px;
    }
}

/* 中等屏幕设备（平板，768px 到 991px） */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    body {
        font-size: 16px;
    }
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 大屏幕设备（桌面显示器，992px 到 1199px） */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    body {
        font-size: 18px;
    }
    .container {
        width: 970px;
        margin: 0 auto;
    }
}

/* 超大屏幕设备（大桌面显示器，大于等于 1200px） */
@media only screen and (min-width: 1200px) {
    body {
        font-size: 20px;
    }
    .container {
        width: 1170px;
        margin: 0 auto;
    }
}

2. 视口单位（Viewport Units）

视口单位基于浏览器视口的大小，包括 vw（视口宽度的百分比）、vh（视口高度的百分比）、vmin（视口宽度和高度中较小值的百分比）和 vmax（视口宽度和高度中较大值的百分比）。

h1 {
    font-size: 5vw; /* 字体大小为视口宽度的 5% */
}

.box {
    width: 50vw; /* 宽度为视口宽度的 50% */
    height: 50vh; /* 高度为视口高度的 50% */
}

3. 弹性布局（Flexbox）和网格布局（Grid）

Flexbox 和 Grid 是 CSS 中强大的布局模型，它们可以帮助你创建灵活的、自适应的布局。

/* Flexbox 示例 */
.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 200px; /* 每个项目至少 200px 宽，并且可以伸缩 */
    margin: 10px;
}

/* Grid 示例 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.grid-item {
    background-color: lightblue;
    padding: 20px;
}

这些方法可以单独使用，也可以结合使用，以实现不同的网页适配需求。