gpt4 book ai didi

css - 媒体查询无法正常工作

转载 作者:行者123 更新时间:2023-11-28 08:20:18 26 4
gpt4 key购买 nike

我正在尝试为移动应用程序制作一个响应式页面,但内容没有显示,即使我确定我的查询中有正确的参数。我在一个 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;
}

}

最佳答案

问题应该是第一个媒体查询没有关闭,少了一个“}”符号。

尽量让你的代码始终使用标签组织起来,这样你就可以避免这些语法错误:)

关于css - 媒体查询无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28793559/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com