Question

我为我的新网店制作了横幅，但有一个问题。当网站是完整尺寸的，例如在我的笔记本电脑上，横幅非常适合，但当我看到手机，笔记本电脑和更小尺寸的网站时，横幅是不合适的。我真的希望你们中的一些人可以帮我把横幅自动装上。

HTML代码：

<script type="text/javascript">
var bannersnack_embed = {"hash":"bxplv88nb","width":900,"height":297,"t":1425594057,"userId":17355456,"wmode":"transparent"};
</script>
<script type="text/javascript"src="http://files.bannersnack.com/iframe/embed.js"></script>

Answer 1

尝试使用不同的图像格式用于不同的屏幕和CSS @media查询。例如：

@media screen and (max-width: 980px) {
    /*Your CSS here*/
}

此外，您可能希望将响应元素与背景图像一起使用。例如：

body {
    width: 100%;
}

.banner {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    background: url(http://static1.squarespace.com/static/51d44341e4b085686833bb66/520a9569e4b007829c46f58d/520a969be4b007829c473837/1378226922960/?format=1000w);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #fff;
}

<div class="banner"></div>

这是一个很好的教程：https://css-tricks.com/perfect-full-page-background-image/

HTML自动调整大小横幅以适应不同的格式/屏幕

1 个答案: