我正在努力让它响应手机。我有无法正确调整大小的背景图片。我试过媒体查询但不知道为什么它不起作用。我的代码如下；
.container3{
display: flex;
align-items: center;
background-size: cover;
height: 700px;
text-shadow: 0.25px 0.25px 0.25px #000000;
background-image: url('Images/homepage.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
@media all and (max-width:480px)and(min-width:0px) {
.container3 {
width: 100%;
background-image: url('Images/homepage.jpg');
}
}<html>
<title>Unity</title>
<link href="Style.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<meta name="viewport" content="width=500, initial-scale=1">
<body>
<div class="container3">
<div class="title">
<h1>
bringing people together
</h1>
<p>free advertising space</p>
</div>
</div>
</body>
</html>最佳答案
.container3{
display: flex;
align-items: center;
background-size: cover;
height: 700px;
text-shadow: 0.25px 0.25px 0.25px #000000;
background-image: url('Images/homepage.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
@media all and (max-width:888px) {
.container3 {
width: 100%;
background-image: url('http://feelgrafix.com/data/background/background-17.jpg');
}
}<html>
<title>Unity</title>
<link href="Style.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<meta name="viewport" content="width=500, initial-scale=1">
<body>
<div class="container3">
<div class="title">
<h1>
bringing people together
</h1>
<p>free advertising space</p>
</div>
</div>
</body>
</html>它不起作用，因为语法错误，你应该在@media all and (max-width:480px)and(min-width:0px)中使用空格。像这样:@media all and (max-width:480px) and (min-width:0px) 还有，它是多余的，因为设备的宽度总是大于 0px，所以你可以删除第二部分。
我使用了 max-width:888px，因此您可以在代码段中看到示例 img。
关于html - 背景图片、手机和媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39347900/