Question

我已经尝试过一些方法来做到这一点，但仍然无法正常工作

这是一个简单的代码：

<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 我想知道按％调整元素大小但它仍然不起作用视口无法正常工作

我做错了什么？

Answer 1

您的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>

最后，如果您想制作自适应网站，请不要指定固定的高度和宽度。

通过CSS调整背景大小

1 个答案: