我已经尝试了一些方法，但还是不行
这是一个简单的代码:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Convite</title>
<style>
body {
background-image: url("bgg.jpg");
}
@media screen and (max-width : 480px) {
background-image: url("bgg.jpg");
background-size: auto; 480px;
.1 {height:300px;
width:480px;
}
.2 {height:107px;
width:480px;
}
.3 {height:34px;
width:480px;
}
}
</style>
</head>
<body>
<br><br>
<center>
<span class="1"><img src="1.png"></span>
<br><br>
<span class="2"><img src="2.png"></span>
<br><br>
<span class="3"><img src="3.png"></span>
</center>
</body>
</html>
所以我有 4 个元素(3 个图像和 1 个背景) 背景的原始尺寸为 1280 x 720p 我想按 % 调整元素的大小，但它仍然不起作用 视口(viewport)不工作
我做错了什么？
最佳答案
您的 CSS 和 HTML 有很多问题。这是固定版本。
错误如下:
- 缺少 DOCTYPE
- 使用数字作为 CSS 类的前缀
- 滥用
<br>调整布局 - 媒体查询语法不正确
- 图片标签中缺少 Alt
- 使用过时的
<center>标签 - 错误使用
<span>标签，这是一个内联元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Convite</title>
<style>
body {
background-image: url("bgg.jpg");
}
.center {
margin: auto;
}
@media screen and (max-width : 480px) {
body {
background-image: url("bgg.jpg"); /* this line is redundant */
background-size: cover;
}
.foo1 {
height:300px;
width:480px;
}
.foo2 {
height:107px;
width:480px;
}
.foo3 {
height:34px;
width:480px;
}
}
</style>
</head>
<body>
<div class="center">
<div class="foo1"><img src="1.png" alt="" /></div>
<div class="foo2"><img src="2.png" alt="" /></div>
<div class="foo3"><img src="3.png" alt="" /></div>
</div>
</body>
</html>
最后，如果你要做响应式网站，请不要指定固定的高度和宽度。
关于html - 通过 CSS 调整背景大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49972228/