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

Question

在设计响应式布局时，2018 年使用 max-width 容器的标准尺寸是多少？目前我正在使用 1140px 来适应 1366px 的标准屏幕尺寸。

原文由 SebastianOpperman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

这些是尺寸：

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

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

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

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

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

原文由 Tim Gerhard 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2022 年更新

以下是我根据今天的全球使用统计数据提出的最新断点/容器建议：

 $breakpoints: (
    xs: 0,
    sm: 600px, // mobile landscape, tablet (portrait)
    md: 1024px, // chromebooks, ipad pro (portrait), tablet (landscape)
    lg: 1600px, // most laptops and desktops
    xl: 2048px // 2k and up
);

$container-max-width: (
    xs: 480px,
    sm: 960px,
    md: 1280px,
    lg: 1920px,
    xl: 3840px
);

以前的答案

根据使用情况统计，最常见的桌面分辨率是 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
);

原文由 Arajay 发布，翻译遵循 CC BY-SA 4.0 许可协议