2018 年标准的 CSS 容器大小是多少？

Question

设计响应式布局时，max-width2018年使用容器的标准是什么？目前我使用1140px来适应1366px的标准屏幕尺寸。

Answer 1

我会说使用 bootstrap 容器大小，因为它们经常使用并且在 Web 开发以下是相当平均的。

这些是尺寸：

xs（适用于手机 - 屏幕宽度小于 768 像素）

sm（适用于平板电脑 - 屏幕宽度等于或大于 768 像素）

md（适用于小型笔记本电脑 - 屏幕宽度等于或大于 992px）

lg（适用于笔记本电脑和台式机 - 屏幕宽度等于或大于 1200 像素）

所以是的，我会使用 1200px 作为您的桌面容器大小。

Answer 2

根据使用情况统计，最常见的桌面分辨率是 1366 和 1920。

查看使用情况统计：https : //gs.statcounter.com/screen-resolution-stats

因此，我发现 Bootstrap 默认断点太小，重新定义容器如下。

$grid-breakpoints: (
    xs: 0,
    sm: 768px,
    md: 992px,
    lg: 1366px,
    xl: 1920px
);

$container-max-widths: (
    sm: 720px,
    md: 960px,
    lg: 1280px,
    xl: 1840px
);

编辑：经过进一步思考，这些容器最大宽度与屏幕宽度成正比。然而，这与 Bootstrap 默认设置的偏差更大。

$container-max-widths: (
    sm: 720px,
    md: 930px,
    lg: 1280px,
    xl: 1800px
);