javascript - 在各种设备上显示不同的图像

Question

我使用的是 Joomla 3.3.4，仅供引用。

我在首页 (http://www.ckdev.info/cdp) 上有一张图片，呼吁采取行动填写表格以获得免费估价。它在桌面或平板电脑(横向)中表现出色，因为表单显示在右侧。

但是，当在其他设备或方向上查看时，视口(viewport)太小而无法在右侧显示侧边栏，它会下降到底部。所以“右箭头”图像没有逻辑意义。

我想做的是一些“if-else”解决方案。如果屏幕宽度为 xx px 或更大，则显示“right-arrow.jpg”，否则显示“down-arrow.jpg”。我将在表单上附加一个 anchor ，以便在显示时单击/触摸 down-arrow.jpg 将向下滚动到表单。

恐怕我不是编码员，虽然我毫不怀疑这是可以做到的，但我不知道怎么做!谢谢。

Answer 1

您可以使用 css 媒体查询来做到这一点。

试试这个:(将 900px 和 899px 更改为您想要的值)

@media(min-width: 900px) {
    #img {
        width: 100%;
        height: 150px;
        background: url('http://www.ckdev.info/cdp/images/estimate.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}

@media(max-width: 899px) {
    #img {
        width: 100%;
        height: 100px;
        background: url('http://www.ckdev.info/cdp/images/estimate.png');/*change image url*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;        
    }
}

在这里查看:jsFiddle (resize result window width to more than 900px)

我只是在不同的媒体查询上让你的图片大小不同，而是将你的背景 url 更改为你想要的图片。