1

我正在使用960 Smart Grid来设计一个网站。这是一个移动优先的网格系统，我遇到了一些麻烦。为了使网格系统正常工作，padding-left 元素不能更改或中断，除非在默认布局中所有内容都是单列。

我需要在移动视图中调整元素的填充，当元素大于单列视图宽度（大于 768 像素）时，它会搞砸元素。我需要将填充改回原始智能网格样式表所说的内容，但我不知道该怎么做。

我对此很陌生，我目前没有该网站，但我可以共享所需的任何代码。我正在调整段落元素的填充，设置在 div 元素内。

<div id="intro" class="columns twelve" class="row">
            <p id="tagline" class="columns eight offset-two">Sample Text.</p>
</div>

本质上，我需要为移动视图中的段落元素设置 6% 的填充。一旦它达到 768 像素的最小宽度，我需要消除 6% 的填充，因为它破坏了标记的偏移量 2 部分。偏移量是在智能网格样式表中使用基于屏幕大小的 padding-left 值实现的。如果可能的话，我想为所有媒体查询从智能网格样式表切换回默认填充。您可以在问题开头链接到的网站上查看基本网格文档。

谢谢您的帮助。

4

1 回答 1

0

我不确定我是否理解您的问题，但看起来您只需要在浏览器小于 768 像素时覆盖填充。

为此，您只需在主 css 的末尾添加（或在新 css 中，但在另一个 css 之后调用）：

@media screen and (max-width: 768px) {
   .columns.eight.offset-two {
   padding: 6%;
   }
}

这意味着只有当浏览器小于 768px时才会应用此样式，并且一旦它变大，它将为您的元素带回“默认”填充。对于更大的分辨率，您不需要再次指定填充，因为浏览器一旦超过数字，它就会完全忘记媒体查询（就像它不再存在一样）。您唯一需要记住的是，除非您在此之后设置另一个较小的媒体查询，否则它将将 6% 应用于所有较小的尺寸。

将媒体查询保留在最后很重要，因为 css 是从上到下读取的，最后读取的样式将是最后应用的样式。

于 2013-05-29T04:17:13.900 回答