我有以下代碼，這是我從教程中獲得的。當我在 Chrome 或 Firefox 上運行時，無論我是否調整窗口大小，都會顯示所有兩行。我究竟做錯了什么？<html><head> <style>#content-desktop {display: block;}#content-mobile {display: none;}@media screen and (max-width: 768px) {#content-desktop {display: none;}#content-mobile {display: block;}</style><meta charset="UTF-8"><title>Untitled Document</title></head><div class="content-desktop">This is the content that will display on DESKTOPS.</div><div class="content-mobile">This is the content that will display on MOBILE DEVICES.</div><body></body></html>
3 回答
萬千封印
TA貢獻1891條經驗 獲得超3個贊
首先，您正在使用class="content-desktop"andclass="content-mobile"并且您的 CSS 是期望的，id因為您使用了#content-desktopand #content-mobile。
其次，您忘記關閉支架。
在 CSS 中，您需要使用點.來選擇class和#選擇id。
嘗試這個 ：
.content-desktop {display: block;}
.content-mobile {display: none;}
@media screen and (max-width: 768px) {
.content-desktop {display: none;}
.content-mobile {display: block;}
}
絕地無雙
TA貢獻1946條經驗 獲得超4個贊
您從未關閉括號，您正在使用 # 來定位您需要使用的類。而且你的 div 也在 body 標簽之外。此外，在這種情況下，您還需要查詢上述縮放比例。下面的代碼經過測試。你可以直接運行它。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.desktop {
background-color: yellow;
padding: 20px;
}
@media screen and (max-width: 600px) {
.desktop {
display: none;
}
.mobile{
background-color: red;
padding: 20px;
}
}
@media screen and (min-width: 600px){
.mobile{
display: none;
}
}
</style>
</head>
<body>
<h2>Hide elements on different screen sizes</h2>
<div class="desktop">Show on desktop but hide on mobile.</div>
<div class="mobile">Show on Mobile but hide on desktop</div>
</body>
</html>
不負相思意
TA貢獻1777條經驗 獲得超10個贊
你永遠不會關閉這里打開的括號：
@media screen and (max-width: 768px) {因此，整個@media規則都會被解析器丟棄。只需在應該關閉的地方關閉它（可能在 之前</style>）。
- 3 回答
- 0 關注
- 260 瀏覽
添加回答
舉報
0/150
提交
取消