大屏幕上混乱的 CSS 位置答案

【问题标题】：Disorganized CSS position on large screens大屏幕上混乱的 CSS 位置
【发布时间】：2014-01-11 14:58:20
【问题描述】：

我为 Streaming 创建了一个控制面板。在我的分辨率 1366 x 768 中，它完美地打开，在大屏幕上，它完全杂乱无章地打开。有谁知道是否有可能锁定 CSS 的位置，使其不会在大屏幕上“自动调整”？

谢谢！

【问题讨论】：

问题将是因为随着宽度的增加，内容将开始并排堆叠。您可以通过使用固定宽度布局#container {width:1200px, margin:0 auto;} 来防止这种情况。我通常会使用 max-width 和 min-width 而不是 width 以便内容可以调整一点，而不是太多
谢谢！如何使用#container {width:1200px, margin:0 auto;}？我在哪里添加？我是 web rs 的初学者
我会为您添加一个答案，并在其中包含一个示例。

【解决方案1】：

基于浏览器宽度，一种标准方法，锁定 css 是使用media queries

Check this link 关于m.q 的一般断点

您可以只定位一个特定的浏览器宽度并锁定你的CSS！

【讨论】：

【解决方案2】：

如果您向页面添加容器，它将阻止内容变得太宽。这是一个例子：

HTML：

<body>
    <div id="container">
        <!-- rest of markup here -->
    </div>
</body>

CSS：

#container {
    max-width:1450px;
    min-width:980px;
    /*width:1200px;*/
    margin: 0 auto; 
}

我已经设置了最大值和最小值，您可以改为设置宽度 - 由您决定。

【讨论】：