如何在媒体查询中将元素的样式设置为父样式表中的值？
我正在使用960 Smart Grid来设计一个网站。这是一个移动优先的网格系统，我遇到了一些麻烦。为了使网格系统正常工作，左填充元素不能更改或断开，除非在默认布局中，所有内容都是单列。
我需要调整移动视图中元素的填充，当元素大于单列视图宽度(因此大于768px)时，这会使元素变得混乱。我需要将填充改回原来的智能电网样式表，但我不确定如何做到这一点。
我对此相当陌生，目前我还没有这个网站，但我可以分享任何需要的代码。我正在调整设置在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部分。偏移是在智能电网样式表中使用基于屏幕大小的左填充值来实现的。如果可能的话，我想从智能电网样式表切换回所有媒体查询的默认填充。您可以在我在问题开头链接的站点上查看基本的网格文档。
谢谢你的帮助。
回答 1
Stack Overflow用户
发布于 2013-05-29 12:17:14
我不确定我是否理解了你的问题，但是当浏览器小于768像素时，看起来你只需要覆盖填充。
为此，您只需在主css的末尾添加(或在新的css中，但在另一个之后调用)：
@media screen and (max-width: 768px) {
.columns.eight.offset-two {
padding: 6%;
}
}这意味着只有当浏览器的小于768px时，这个样式才会被应用，一旦它变大，它将带回你的元素的‘默认’填充。对于更大的分辨率，你不需要再次指定填充，因为当浏览器超过这个数字的那一秒，它就会完全忘记媒体查询(就像它不再存在一样)。您需要记住的唯一一件事是，除非您在此之后设置另一个较小的媒体查询，否则它会将6%应用于所有较小的大小。
将媒体查询放在最后很重要，因为css是从上到下读取的，最后读取的样式将是最后应用的样式。
https://stackoverflow.com/questions/16802820
复制相似问题
腾讯云开发者
