@media 屏幕无法工作，出了什么问题？
我有以下代码，这是我从教程中获得的。当我在 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>
RISEBY浏览 166回答 3
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;}} -
绝地无双
您从未关闭括号，您正在使用 # 来定位您需要使用的类。而且你的 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> -
不负相思意
你永远不会关闭这里打开的括号：@media screen and (max-width: 768px) {因此，整个@media规则都会被解析器丢弃。只需在应该关闭的地方关闭它（可能在 之前</style>）。
随时随地看视频慕课网APP
相关分类
Html5