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 }
}

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

Answer 1

伴侣，

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

＆＃13;

/*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*/
  }
}

＆＃13;

大屏幕中的CSS最大内容宽度（purecss）

1 个答案: