Question

我正在使用Joomla 3.3.4 FYI。

我在首页上有一张图片（http://www.ckdev.info/cdp），这是一个完成表单以便免费估算的号召性用语。它在桌面或平板电脑（风景）中非常棒，因为表格显示在右侧。

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

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

我担心我不是那么编，所以我毫不怀疑这可以做到，我不知道怎么做！感谢。

Answer 1

您可以使用css media-queries执行此操作。

试试这个:(将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（将结果窗口宽度调整为大于900px）

我刚刚在不同的媒体查询中制作了不同尺寸的图片，而是将您的背景网址更改为您想要的图片。

Answer 2

您想要的是用于更改显示图像的CSS媒体查询。

对于像iphone这样的智能手机来说，它就是这样的：

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)

{/ * STYLES GO HERE * /}

有关详细信息，请查看：

w3schools

cssmediaqueries

Answer 3

你可以使用jQuery实现这一点，只要你不介意来自滚动条的窗口宽度的某些异味，就没有任何额外的东西。我会在一秒内回到滚动条。要测试宽度，您可以使用jQuery(window).width()。这将返回窗口的宽度（以像素为单位）。正是你在寻找什么。一个示例代码段：

jQuery(document).ready(function(){
  if (jQuery(window).width() > 1000){
    jQuery(<select img here>).attr('src', '/path/to/new/image.jpg');
  }
});

我注意到你提到的图片上没有类或id。我建议添加一个id，以便更容易选择。例如，<img src="/cdp/images/estimate.png" alt="Get a free interior or exterior painting estimate" id="estimate-with-arrow">。如果您进行此更改，则可以将<select img here>替换为'img#estimate-with-arrow'（这将选择带有估计值为箭头的图像）。瞧，图像交换。

我会注意到三件事。首先，这只适用于初始页面加载。如果用户以完整桌面宽度加载页面然后将其缩小，则图像在通过断点时不会更改。您需要绑定到调整大小才能使其工作：

jQuery(window).resize(function() {
  <code here>
});

其次，我设置了这个特定的代码来替换 over 1000 px的任何屏幕的图像。这意味着您只需为较小的设备加载一个图像，从而节省带宽。这是首选，广告移动计划更挑剔。

第三，滚动条。使用jQuery测试窗口宽度与css的断点不匹配。我使用modernizr来解决这个问题。这虽然有点先进。

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

3 个答案: