隱藏內容On Only手機

-1

我想我的網站（手機/臺式機）的菜單看起來有點像這樣一個：http://www.panic.lv/en/（移動時的HOME除外）桌面 - 顯示鏈接「HOME」，「WORKS」，「關於「和」聯繫人「手機 - 無鏈接，只有徽標隱藏內容On Only手機

我跟着this instructions，但他們似乎並沒有完全工作。

HTML

<div id="wrapper"> 
    <ul class="menu"> 
     <div id="home"><a href="index.html">HOME</a></div> 
     <div id="works"><a href="workshome.html">WORKS</a></div> 
     <div id="logo"></div>  
     <div id="about"><a href="about.html">ABOUT</a></div> 
     <div id="contacts"><a href="contacts.html">CONTACTS</a></div> 
    </ul> 
</div>

CSS

#wrapper { 
    margin-left: 30px; 
    margin-right: 30px; 
    background-color: none; 
    margin-top: 30px; 
    display: flex; 
    -webkit-display: flex; 
    -moz-display: flex; 
} 

.menu { 
    width: 100%; 
    height: 100%; 
    background-color: none; 
    display: flex; 
    -webkit-display: flex; 
    -moz-display: flex; 
    align-items: center; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    padding: 0px; 
} 

@media screen and (min-width: 991px) { 
#home { 
    margin-left: 0px; 
    height: 30px; 
    width: 20%; 
    font-family: 'Ropa Sans', sans-serif; 
    color: ghostwhite; 
    font-size: 15px; 
    font-weight: normal; 
    background-color: none; 
    box-sizing: border-box; 
    text-align: right; 
} 

#works { 
    height: 30px; 
    width: 20%; 
    font-family: 'Ropa Sans', sans-serif; 
    color: ghostwhite; 
    font-size: 15px; 
    background-color: none; 
    box-sizing: border-box; 
    text-align: center; 
} 


#about { 
    height: 30px; 
    width: 20%; 
    font-family: 'Ropa Sans', sans-serif; 
    color: ghostwhite; 
    font-size: 15px; 
    background-color: none; 
    box-sizing: border-box; 
    text-align: center;  
} 


#contacts { 
    height: 30px; 
    width: 20%; 
    font-family: 'Ropa Sans', sans-serif; 
    color: ghostwhite; 
    font-size: 15px; 
    background-color: none; 
    box-sizing: border-box; 
    text-align: left; 
    } }

來源

2016-01-13 Catarına Correıa

@media（大小....）{的.class：顯示無} –

變化display: flex到display: none;到現有.menu規則隱藏菜單。

然後，將它添加到你的CSS文件來打開它一定的屏幕尺寸上面：

@media (min-width: 1000px) { 
    .menu { 
     display: flex; 
    } 
}

（大小，1000像素，是填充取決於是否你說的只是手機，還是。也是平板電腦，或者什麼，你將不得不改變）

編輯 - 上面的答案是很好的隱藏整個菜單，我留給任何人研究這個簡單的選項。以下是我從這個問題中忽略的更具體的參數。

忽視上述答案的變化。

如果你想以最小的變化，你的代碼/額外的HTML做到這一點，你可以簡單地添加到你的CSS：

.menu div { 
    display: none; 
} 
.menu div#logo { 
    display: block; !important 
} 
@media (min-width: 991px) { 
    .menu div { 
     display: block; 
    } 
}

不過，我強烈建議更穩定的（和更容易後來編輯）的解決方案是增加class="links"每個div以外的其他標誌，然後用下面的CSS：

.menu div.links { 
    display: none; 
} 
@media (min-width: 991px) { 
    .menu div.links { 
     display: block; 
    } 
}

來源

2016-01-13 03:00:43

我做到了，菜單消失了！但我希望徽標保持可見，並且現在不會發生這種情況，因爲它位於.menu 這就是爲什麼我試圖隱藏鏈接（＃home，#works，#about和#contacts）。我在鏈接上做了這個，但是它不能很好地工作，這使得它們在桌面上也不可見。 –

好吧，我忽略了那個細節。我相應地編輯了我的答案。 –

謝謝！它的工作：D –

@media screen and (max-width: 991px) { 
    .menu{ 
     display:none; 
    } 
}

來源

2016-01-13 02:52:04 YounesM

你誤讀。這只是在手機上「秀」，他們要求只在手機上「隱藏」。你可以將'min-width'改爲'max-width'，儘管我的單獨答案更符合典型的「首選練習」。 –

是的，你是對的沒有注意最小寬度和假設是最大寬度 – YounesM

只有代碼答案不可能對OP或未來的訪問者有用。請考慮擴大你的答案，包括一個解釋你爲什麼認爲這是正確的。 – Magisch

隱藏內容On Only手機

回答

相關問題