平均/最受欢迎的屏幕尺寸和bootstrap3

Question

如果平均/最受欢迎的屏幕尺寸宽度现在超过1366px,为什么最大宽度:1170px的bootstrap最宽容器(来自他们的CDN)？

.container {
    max-width: 1170px;
}

我不应该相信我读到的一切吗？

顺便说一下,这是来自许多方面,而不是我遇到的第一个来源.

这个问题的根本原因是我想设计最大宽度桌面使用 - 当桌面设计最终确定时,我会担心平板电脑和手机.

Answer 1

关于屏幕分辨率

据screenresolution.org,实际最流行的分辨率是 1366x768,没有更多的.

关于那些1170px

对于桌面显示器,Bootstrap使用1170px宽度,左/右侧填充15px:

@media (min-width: 1200px)
    .container {
        width: 1170px;
    }
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

快速计算:(1366 - 1200) / 2 = 83.
Bootstrap桌面布局在屏幕两侧保留(至少)83px的边距(如果计算填充,则为98px).这不是那么大,它避免页面看起来拥挤.对于一个反例,维基百科使用100%宽度的布局,但许多人认为它"太多",它降低了可读性.

如果我想改变这个怎么办？

您不必担心Bootstrap宽度.当然你可以改变它.
在Bootstrap 3中几乎所有内容都以百分比设置.
看看Bootstrap自定义和下载页面,你会发现一些有用的变量:

• 媒体查询断点
  • @screen-xs-min: 480px
  • @screen-sm-min: 768px
  • @screen-md-min: 992px
  • @screen-lg-min: 1200px
• 布局和网格系统
  • @container-sm: ((720px + @grid-gutter-width))
  • @container-md: ((940px + @grid-gutter-width))
  • @container-lg: ((1140px + @grid-gutter-width))
  • @grid-columns: 12
  • @grid-gutter-width: 30px
  • @grid-float-breakpoint: @screen-sm-min