html - 大屏幕中的 CSS 最大内容宽度 (purecss)

Question

我的网页在智能手机和平板电脑上看起来不错，但有问题。但在桌面屏幕上，内容会扩展到整个页面宽度。我使用纯 css 框架。 example link

我希望网格在宽桌面页面上显示时不会延伸到整个页面

在我的 CSS 中，我为媒体屏幕设置了一些断点。整个页面是这样包裹的

<div class="container">
   <div class="pure-g"> 
     <div class="pure-u-1 pure-u-lg-1-3"> ...... </div>
    </div>
</div>

我曾尝试使用 pure-u-lg-1-3 在大页面上缩小宽度，但除此之外这不起作用，我怀疑这是否是解决方案。

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 100px }
}

我想要的是我在 800 像素以上的大型媒体屏幕上的内容宽度有限。如何将我的页面内容设置为最大 600px(实际上几乎每个网页都这样做)

Answer 1

伴侣，

试试下面的样式表，让我知道它是否有效。

/*Using media to set the style If screen is bigger than 800px*/
@media screen and (min-width: 800px) {
  .container {
    max-width: 600px;/*Limit max-width to 600px*/
    margin: 0 auto;/*Centering this container*/
  }
}