Question

我正在使用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％填充，因为它打破了标签的偏移两部分。使用基于屏幕尺寸的填充左侧值在智能网格样式表中实现偏移。如果可能的话，我想从智能网格样式表切换回所有媒体查询的默认填充。您可以在问题开头查看我链接到的网站上的基本网格文档。

感谢您的帮助。

Answer 1

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

要做到这一点，你只需要在主css的末尾添加（或者在新的css中添加，但在另一个之后调用）：

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

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

最后保留媒体查询非常重要，因为css是从上到下阅读的，最后一个样式是最后一次应用。

如何将元素的样式设置为媒体查询中父样式表中的值？

1 个答案: