网页内容宽度自适应

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

简单宽度

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

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

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

方案

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

猫猫不喜欢网页留有太多空白，当内容太宽时，说明需要调整整个窗口，留出位置来给其他应用程序，而不是留出无意义的 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%)

代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@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;
}

1
2
3
4
5
6

.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];
}