Html 平均/最流行的屏幕大小和开机时间3_Html_Css_Twitter Bootstrap_Responsive Design_Twitter Bootstrap 3

Html 平均/最流行的屏幕大小和开机时间3

html css twitter-bootstrap responsive-design twitter-bootstrap-3

Html 平均/最流行的屏幕大小和开机时间3,html,css,twitter-bootstrap,responsive-design,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Responsive Design,Twitter Bootstrap 3,如果平均/最流行的屏幕尺寸宽度现在超过1366px，那么为什么引导最宽的容器（来自CDN）的最大宽度为1170px .container { max-width: 1170px; } 难道我不应该相信我读到的一切吗顺便说一句，这是很多来源的，不是我第一次看到的这个问题的根本原因是我想设计最大宽度的桌面使用——当桌面设计完成时，我会担心平板电脑和手机。例如，Galaxy S4的实际运行速度为1080p。如果将它置于纵向模式，你会认为它会运行整个桌面站点，例如，将5.5英寸的屏幕与我的

如果平均/最流行的屏幕尺寸宽度现在超过1366px，那么为什么引导最宽的容器（来自CDN）的最大宽度为1170px

.container {
    max-width: 1170px;
}

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

顺便说一句，这是很多来源的，不是我第一次看到的

这个问题的根本原因是我想设计最大宽度的桌面使用——当桌面设计完成时，我会担心平板电脑和手机。

例如，Galaxy S4的实际运行速度为1080p。如果将它置于纵向模式，你会认为它会运行整个桌面站点，例如，将5.5英寸的屏幕与我的24英寸LCD进行比较，这听起来很糟糕。手机制造商似乎给浏览器添加了一个“假”分辨率，可能带有某种“缩放”。我会在一个实际的设备上进行测试，或者至少在一个Android模拟器上进行测试，看看行为是什么。我通常会得到正确的站点，即使它的分辨率很高。

这可能是因为引导开发人员认识到，许多开发人员都没有准备好将内容扩展到那么大，而且更改宽度很简单

关于屏幕分辨率根据，实际最流行的分辨率是

1366x768

，而不是更多

关于那些1170px 对于桌面显示，引导使用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

引导桌面布局在屏幕两侧保持（至少）83像素的边距（如果你算上填充，则保持98像素）。这没有那么大，它可以避免页面看起来拥挤。举个反例，使用100%宽度的布局，但许多人认为它“太多”，这会降低可读性

如果我想改变这个怎么办？您不必担心引导宽度。当然，您可以更改它。
在Bootstrap 3中，几乎所有内容都设置为百分比。
查看一下，您会发现一些有用的变量：

媒体查询断点

```
@屏幕最小xs:480px
```
```
@屏幕sm最小值：768px
```
```
@屏幕md最小值：992px
```
```
@屏幕最小长度：1200px
```

布局与网格系统

@容器sm:（（720px+@网格槽宽度））

@container md:（（940px+@网格槽宽度））

@container lg:（（1140px+@网格槽宽度））

```
@网格列：12
```
```
@网格槽宽度：30px
```
```
@网格浮动断点：@screen sm min
```