# 网页内容宽度自适应


一个良好的自适应体验应当保证页面不应有跳变，网页首要的元素是主要内容的位置和大小，计算页面的内容宽度，给出 CSS 和 TailwindCSS 代码。

<!--more-->

## 简单宽度

单纯将内容控制在范围内，并且自适应最简单的方式就是将容器的宽度设置为百分比，如 `width: 80%;`，这似乎不错，再加上控制最大值的 `max-width: 1200px;` 似乎也有不错的效果，追求简洁高效，这样设置也不失一个办法。

实现不同宽度不同占比的一般做法是使用媒体查询，常见的媒体查询断点为：

- 像素为单位: `640px` `768px` `1024px` `1280px` `1536px`
- 字号为单位: `40rem` `48rem` `64rem` `80rem` `96rem`
- TailwindCSS 端点名称: `sm` `md` `lg` `xl` `2xl`

## 方案

猫猫喜欢让内容能够尽量占据整个页面，这是猫猫感觉最好的方案：

| 断点 | rem | px   | 百分比 | 理论最小 | 理论最大 | min-width |
| ---- | --- | ---- | ------ | -------- | -------- | --------- |
| -    | -   | -    | 0.95   | 0        | 38       | -         |
| sm   | 40  | 640  | 0.95   | 38       | 45.6     | 38        |
| md   | 48  | 768  | 0.91   | 43.68    | 58.24    | 45.6      |
| lg   | 64  | 1024 | 0.88   | 56.32    | 70.4     | 58.24     |
| xl   | 80  | 1280 | 0.86   | 68.8     | 82.56    | 70.4      |
| 2xl  | 96  | 1536 | 0.85   | 81.6     | -        | 82.56     |

猫猫不喜欢网页留有太多空白，当内容太宽时，说明需要调整整个窗口，留出位置来给其他应用程序，而不是留出无意义的 margin 空白，所以即使宽度超过 1280，空白也仅有 15%。
这样做还有另一个好处：在高清小屏设备上，也能不浪费空间，以 1440P 屏幕为例，在不用便携设备优化的情况下内容也能占据大部分。

同时在小尺寸窗口上，内容可以占满窗口，一方面暗示空间不够用，另一方面也能为其他窗口挤出空间。

最后，这份方案在常用窗口宽度表现很好（猫猫叉腰）：

- 1920 (1080P 横屏全屏): 1632 (85%)
- 1600 (900P 横屏全屏): 1360 (85%)
- 1280 (1440P 横屏半屏): 1238.4 (86%)
- 1080 (1080P 竖屏全屏): 950.4 (88%)
- 960 (1080P 横屏半屏): 873.6 (91%)
- 720 (720P 竖屏全屏): 684 (95%)

## 代码

```css {title="CSS"}
@media (min-width: 80rem) {
    .page-framework {
        width: 86%;
        min-width: 70.4rem;
        /* 最大宽度看情况增加 */
        max-width: 96rem;
    }
}
@media (min-width: 64rem) {
    .page-framework {
        width: 88%;
        min-width: 58.24rem;
    }
}
@media (min-width: 48rem) {
    .page-framework {
        width: 91%;
        min-width: 45.6rem;
    }
}
.page-framework {
    width: 95%;
    margin-inline: auto;
}
```

```css {title="TailwindCSS"}
.page-framework {
  @apply mx-auto w-[95%] md:w-[91%] lg:w-[88%] xl:w-[86%] 2xl:w-[85%];
  @apply md:min-w-[45.6rem] lg:min-w-[58.24rem] xl:min-w-[70.4rem] 2xl:min-w-[82.56rem];
  /* 最大宽度看情况增加 */
  @apply 2xl:max-w-[96rem];
}
```

---

> Author: [猫猫](https://github.com/nek0x1a)  
> URL: https://eroneko.eu.org/posts/code/webpage-container-width/