如何將元素的樣式設置爲媒體查詢中父樣式表中的值？

Question

我使用的是960 Smart Grid來設計一個網站。這是一個移動的第一個網格系統，我遇到了一些麻煩。爲了使網格系統工作，填充左側元素不能更改或中斷，除非默認佈局中的所有內容都是單列。

我需要調整移動視圖中元素的填充，當元素大於單列視圖寬度（大於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月底（或在一個新的，但另一種稱爲後）：

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

這意味着，這種風格將只應用如果瀏覽器小於768px，並且一旦它變大，它將爲您的元素帶回默認填充。您不需要再爲更大的分辨率指定填充，因爲第二個瀏覽器越過數字，它完全忘記了媒體查詢（它就像它不再存在）。唯一需要牢記的是，除非在此之後設置另一個較小的媒體查詢，否則它將將6％應用於所有較小的尺寸。

因爲css是從上到下讀取的，所以最後保留媒體查詢很重要，最後一次應用的樣式是最後一次應用。