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

Question

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

Answer 1

我会说使用bootstrap容器大小，因为它们经常被使用，并且在网络开发中非常普遍。

这些是尺寸：

  

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

     

sm（对于平板电脑 - 屏幕等于或大于768px宽）

     

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

     

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

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

Answer 2

以下是材料断点：

https://material.io/guidelines/layout/responsive-ui.html

他们使用各种列和断点：

＆LT; 480/4 cols / xsmall
481 - 600/8 cols / xsmall
601 - 840/8 cols / small
841 - 960/12 cols / small
961 - 1280/12马力/中等
1281 - 1440/12马力/大号 1441 - 1600/12 cols / large
1601 - 1920/12 cols / large（高清台式机）
＆GT; 1920/12 cols / large（Retina台式机）

Adaptive breakpoints in Material Design [img]

Answer 3

根据使用情况统计信息，最常见的台式机分辨率为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
);