CSS響應式設計隱藏小屏幕

我試圖更新我的網站，以一個負責任的三欄佈局。我使用了來自www.responsivegridsystem.com/的代碼，並且一切正常。只有一件事（現在！）我無法解決如何實現。

目前，在非常小的屏幕上，這些列互相摺疊很好，但我希望第三列（右側）不要同時顯示。

這是可能的使用 - display：none; - ??如果是這樣，有人可以建議它應該放置在哪裏，以隱藏這列，而不是打擾別的？我已經嘗試過，但看不到如何做到這一點 - 我不確定是否可以在一個媒體查詢中同時執行摺疊列和隱藏一列。

任何幫助都非常感謝和道歉我缺乏知識。查看完整的頁面代碼在這裏：

https://jsfiddle.net/PIngu123456/76Lkpna0/

.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }

平谷

來源

2016-02-19 Pingu

使用媒體查詢 – silviagreen

像silviagreen說，使用媒體查詢。您已經在代碼中使用了一些代碼，因此您應該瞭解它們的工作原理。這是一個很好的資源：https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries – Joseph

感謝所有您的及時和有益的回覆 – Pingu

修改這樣最後的媒體查詢你在你的代碼

@media screen and (max-width: 480px) { 
         #header { 
         height: auto; 
         } 
         h1 { 
         font-size: 24px; 
         } 
         #nav { 
         width auto 
         } 
         /* DIV STYLES ====================================================================== */ 
         /* MARGINS */ 
         #header, 
         #content { 
         margin-bottom: 5px; 
         } 

         .span_1_of_3:nth-of-type(3){ //this add your column 
         display: none; 
         } 

         }

這已經是結果：jsfiddle

來源

2016-02-19 14:38:14 silviagreen

是的，你可以很容易地做到這一點使用display財產。我更新了的jsfiddle與所需的行爲：https://jsfiddle.net/76Lkpna0/1/

代碼：

添加一個額外的類的第三列HTML：

<div class="col span_1_of_3 hidesmallscreen">

添加此CSS媒體查詢小屏幕：

.hidesmallscreen { 
        display: none; 
}

來源

2016-02-19 14:37:17 pivemi

這也很完美。非常感謝 – Pingu

我建議你爲該列添加一個額外的類，如.last-col或其他。然後在媒體查詢中，在特定寬度下爲其設置display: none。

@media only screen and (min-width : 500px) { 
    .last-col { 
     display: none; 
    } 
}

媒體查詢是僅在特定條件下應用的樣式。

來源

2016-02-19 14:37:45 GMchris

你的div都具有相同的類標籤，span_1_of_3。他們應該被命名爲span_1_of_3 span_2_of_3 span_3_of_3，以便您可以給他們單獨的樣式。

您對所有三個div使用span_1_of_3，因爲該類的樣式爲width:32.26%，它給了您三列。實際上，span_2_of_3是width:66.13%，span_3_of_3是width:100%。因此，將所有三個範圍更改爲width:32.26%以保持原始格式。

然後通過添加以下規則隱藏span_3_of_3在你的CSS，@media only screen and (max-width: 480px) {下：

.span_3_of_3 { 
display: none; 
}

來源

2016-02-19 14:44:55 Trialsman

Daniel，當我按照您的建議更改標籤時，列格式完全丟失 – Pingu

我對JSfiddle進行了更改。按您的意願工作，並允許您進一步設置每個div的樣式。關鍵是標題圖片上方的20多行。將每個跨度的樣式設爲'width：32.26％'，然後'display：none;'展開跨度爲3. – Trialsman

您選擇的答案使用三個跨度的響應網格佈局不正確，並且不能讓您單獨設計風格，因爲佈局是有意的。 – Trialsman

CSS響應式設計隱藏小屏幕

回答

相關問題