只在移動視圖上隱藏div標記？

我正在爲網站創建流體佈局。我試圖在移動視圖中隱藏<div>或整個<div>的內容，而不是平板電腦和桌面視圖。只在移動視圖上隱藏div標記？

這裏就是我這麼遠......

#title_message { 
    clear: both; 
    float: left; 
    margin: 10px auto 5px 20px; 
    width: 28%; 
    display: none; 
}

我已經將顯示器設置爲移動佈局「無」，並設置爲在平板電腦/桌面佈局塊...有一個更簡單的方法來做到這一點，或者是它？

來源

2013-05-14 KoldTurkee

您將需要兩件事情。第一個是@media screen，用於激活特定屏幕大小的特定代碼，用於響應式設計。第二種是使用visibility: hidden屬性。一旦瀏覽器/屏幕達到600pixels然後#title_message將成爲隱藏。

@media screen and (max-width: 600px) { 
    #title_message { 
    visibility: hidden; 
    clear: both; 
    float: left; 
    margin: 10px auto 5px 20px; 
    width: 28%; 
    display: none; 
    } 
}

編輯：如果您使用其它CSS移動則只需添加visibility: hidden;到#title_message。希望這可以幫助你！

來源

2013-05-14 21:28:08 Matt

修復它。謝謝馬特！ – KoldTurkee

我很高興工作！感謝您將答案標記爲正確。 – Matt

當你來到StackOverflow ...總會有一個解決您的查詢.....除了，大部分時間我似乎遇到輕微的選擇。 ...這個答案正是我一直在尋找的！ ...謝謝老兄。（ps用於我的網站http://amazewebs.com上的自定義移動菜單...手機菜單將顯示寬度<768px –

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

這將是一個專門針對iphone屏幕的單個頁面的響應式設計。你是否實際路由到不同的移動頁面？

來源

2013-05-14 18:46:49 Scarecrow

這沒有奏效。它清除了移動版面的所有CSS。 – KoldTurkee

你可以提供你的css的小樣本嗎？我沒有在這裏看到整個圖片，但是這不應該消除你的佈局 – Scarecrow

這個工作更好，因爲可見性：隱藏只隱藏元素，但仍然存在（該地方仍然存在）。相反，顯示：無;真正隱藏它並完全刪除它。 – Angel

將display屬性設置爲none作爲默認值，然後在瀏覽器達到一定寬度時使用媒體查詢將所需樣式應用於div。在媒體查詢中將768px替換爲div的最小px值。

#title_message { 
    display: none; 
} 

@media screen and (min-width: 768px) { 
    #title_message { 
     clear: both; 
     display: block; 
     float: left; 
     margin: 10px auto 5px 20px; 
     width: 28%; 
    } 
}

來源

2013-05-14 20:27:28

這是錯誤的方式。該div不會顯示在不支持媒體查詢的瀏覽器上。 – MMM

respond.js https://github.com/scottjehl/Respond將在不支持媒體查詢的舊版瀏覽器上解決此問題。媒體查詢是響應式網站的解決方案。 –

當然他們是解決方案，但是你這樣做**錯誤的方式**。除非你的網站主要用於移動設備，否則你從來沒有從底層開始構建你的CSS。 – MMM

試試這個

@media handheld{ 
    #title_message { display: none; } 
}

來源

2013-05-14 21:20:29

你可以通過這個例子來指導。在你的CSS文件：

.deskContent { 
    background-image: url(../img/big-pic.png); 
    width: 100%; 
    height: 400px; 
    background-repeat: no-repeat; 
    background-size: contain; 
} 

.phoneContent { 
    background-image: url(../img/small-pic.png); 
    width: 100%; 
    height: 100px; 
    background-repeat: no-repeat; 
    background-size: contain; 
} 

@media all and (max-width: 959px) { 
    .deskContent {display:block;} 
    .phoneContent {display:none;} 
} 

@media all and (max-width: 479px) { 
    .deskContent {display:none;} 
    .phoneContent {display:block;} 
}

在HTML文件中：

<div class="deskContent">Content for desktop</div> 
<div class="phoneContent">Content for mobile</div>

來源

2017-04-19 21:20:36 gras

給予我的桌面上沒有工作的解決方案，它只是表明雙方的div，雖然移動僅表現爲移動DIV。所以我做了一些搜索，找到了最小寬度選項。我在我的代碼更新到下面的，現在工作得很好:)

CSS：

@media all and (min-width: 480px) { 
    .deskContent {display:block;} 
    .phoneContent {display:none;} 
} 

@media all and (max-width: 479px) { 
    .deskContent {display:none;} 
    .phoneContent {display:block;} 
}

HTML：

<div class="deskContent">Content for desktop</div> 
<div class="phoneContent">Content for mobile</div>

來源

2017-08-02 22:15:27

只在移動視圖上隱藏div標記？

回答

相關問題