如何根據主體類別和媒體查詢選擇內容佈局？

Question

所以這裏是問題所在。我對Susy很陌生，所以我不完全確定實現這一目標的最佳方法，但我正在尋找基於body class和下面已經設置的媒體查詢將.hfeed div應用到.hfeed div的佈局。

這是爲什麼。我爲WordPress做這些，並且有不同的佈局，這些佈局是通過使用應用於主體的CSS類來設置的。具體來說，這兩個類是.full-width-content和.content-sidebar。我需要選擇器跨越整個容器或分別坐在當前定義的區域中。因此，我想要的樣式的特定選擇器將是「.full-width-content .hfeed」和「.content-sidebar .hfeed」。我已經嘗試將這些設置爲包含不同的容器，但這不起作用。

我是否應該簡單地將此部分從定義的網格中分離出來，然後按類別選擇，然後執行媒體查詢？

什麼是最好的方式來完成這個susy？

//susy grid definitions, footer sits outside the susy grid def 

#wrap { 
    @include container($total-columns, $break-tablet, $break-desktop); 

    @include at-breakpoint($break-tablet) { 
     #header  { @include span-columns($break-tablet omega); } 
     #title-area { @include span-columns(5, $break-tablet); } 
     #header .widget-area { @include span-columns(4 omega, $break-tablet); } 
     #nav  { @include span-columns($break-tablet omega); } 
     .hfeed  { @include span-columns(6, $break-tablet); } 
     #sidebar { @include span-columns(3 omega, $break-tablet); } 
    } 

    @include at-breakpoint($break-desktop) { 
     #header  { @include span-columns($break-desktop omega); } 
     #title-area { @include span-columns(5, $break-desktop); } 
     #header .widget-area { @include span-columns(5 omega, $break-desktop); } 
     #nav  { @include span-columns($break-desktop omega); } 
     .hfeed  { @include span-columns(7, $break-desktop); } 
     #sidebar { @include span-columns(4 omega, $break-desktop); } 
    } 
} 

Answer 1

對我來說，這是一個CSS特定順序的問題。我從WordPress的悲慘經歷中知道，如果你正在用像Twenty-Eleven這樣的東西製作一個小孩主題，那麼你將會非常努力。因此，如果您嘗試進行更改並且無法正常工作 - 請確保您檢查了您的元素，並查看您的規則是否已被其他樣式應用或被其他風格所覆蓋。正如我相信你已經認識到我們的WordPress主題有很多這個問題。

根據設置你如何你的CSS結構：

•移動第一 - 最小屏幕到大屏幕 •大屏幕到小屏幕

你的代碼可能是這樣的：

默認樣式在css頂部的大屏幕或小屏幕 - 首先進行處理>然後> Media Queries在屏幕大小發生變化時覆蓋這些指令>當發生這種情況時，任何會發生變化的事情都會在這裏進行。

/*默認樣式*/ 體{...}

/*智能手機樣式*/

@media查詢{

body.class .container {...}

}

我不知道如果這能幫助你或沒有，我只是想幫助給你一些方向。我很想看看別人對此有何評論。

通過使用WordPress主題和SASS的方式記住一些事情，以確保您瞭解CSS特定性的成本 - 越具體，越是花費時間來生成頁面。使用SASS來獲得太具體的東西非常容易。

祝你好運我的朋友。對不起，如果這沒有幫助。