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

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/