我有以下代码，这是我从教程中获得的。当我在 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 关注
- 165 浏览
添加回答
举报
0/150
提交
取消