Html @媒体屏幕不工作，怎么了？_Html_Css_Mobile

Html @媒体屏幕不工作，怎么了？

html css mobile

Html @媒体屏幕不工作，怎么了？,html,css,mobile,Html,Css,Mobile,我有以下代码，这是我从一个教程中得到的。当我在Chrome或Firefox上运行时，无论我是否调整窗口大小，所有两行都会显示出来。我做错了什么 <html> <head> <style> #content-desktop {display: block;} #content-mobile {display: none;} @media screen and (max-width: 768px) { #content-desktop {displ

我有以下代码，这是我从一个教程中得到的。当我在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>


#内容桌面{显示：块；}
#内容移动{显示：无；}
@媒体屏幕和屏幕（最大宽度：768px）{
#内容桌面{显示：无；}
#内容移动{显示：块；}
无标题文件
这是将在桌面上显示的内容。
这是将在移动设备上显示的内容。

您永远不会关闭此处打开的支架：

@media screen and (max-width: 768px) {

因此，解析器会删除整个

@media

规则。只需在应该关闭的位置（可能在

之前）将其关闭即可。

首先，您要使用

class=“content desktop”

和

class=“content mobile”

而您的CSS需要

id

，因为您使用了

#content desktop

和

#content mobile

第二，你忘了关上支架

在CSS中，您需要使用点

来选择

类

和

来选择

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>


.桌面{
背景颜色：黄色；
填充：20px；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.桌面{
显示：无；
}
.手机{
背景色：红色；
填充：20px；
}
}
@媒体屏幕和屏幕（最小宽度：600px）{
.手机{
显示：无；
}
}
隐藏不同屏幕大小的元素
在桌面上显示，但在移动设备上隐藏。
在手机上显示但在桌面上隐藏