Question

我尝试为移动应用程序制作响应式页面，即使我确定我的查询中有正确的参数，但内容仍未显示。我在div中有背景图像，因为我只希望它出现在这个页面而不是整个项目中。它在第一个媒体查询中完美运行，但它没有出现在第二个媒体查询中。谢谢。

 <!DOCTYPE html>
  <html lang="en-IE">
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1" >
     <link rel="stylesheet" type="text/css" href="styles.css">
  </head>

<body>

<div id="background_img">
</div>
</body>
 </html>

 @media screen and (max-width: 320px) and (max-height: 480px) and (orientation: portrait) 
{            

#background_img {

background-image: url("money.jpg");  
width: 320px;
height: 430px;
margin:0px;
padding: 0px;
    }

@media only screen  and (max-width: 320px) and (max-height: 568px) and (orientation: portrait)
{

 #background_img {

background-image: url("money.jpg");  
/*background-repeat: no-repeat;*/
width: 320px;
height: 568px;
margin:0px;
padding: 0px;
}

}

Answer 1

问题应该是第一个媒体查询没有关闭，缺少＆＃34; } ＆＃34;登录。

尝试始终使用标签保持代码组织，而不是避免这些sytax错误:)

媒体查询无法正常工作

1 个答案: