媒体查询 - 为不同设备交换图像

Question

我是编码新手，我一直在试图弄清楚如何更改 WordPress 主题中的某些元素，其中之一是在桌面上显示完整的 LinkedIn 图像，但在移动设备上它会切换到较短的徽标 [IN]。

由于阅读了有关 StackOverflow 的几篇文章，我已经可以使用它了，但是该修复程序使号召性用语在 Linkedin 徽标下方下拉。我确信这是一个真正的新手错误，我完全错过了一些东西，但我无法在桌面和移动设备上的 Linkedin 徽标旁边获得行动号召。 （我觉得这可能与周围的 div 有关，但是我看不到任何宽度，我可以在 Chrome Inspect 中更改以使其在徽标旁边弹出）。

代码如下：

HTML

<a href="www.linkedin.com" target="_blank">
<div class="exampleimage"></div></a>
<a href="tel:123 456 789">Need Help? Call » 123 456 789</a>



CSS
.exampleimage{
   background-image: url("http://testenvironment-wel.co.uk/wp-content/uploads/2017/09/Working-Environments-Company-LinkedIn-Logo.png");
   background-size: contain;
   width: 140px;
   height: 18px; 

}

@media only screen and (max-width: 500px){

   .exampleimage{
       background-image: url("http://testenvironment-wel.co.uk/wp-content/uploads/2017/09/Working-Environments-LinkedIn-Logo-small-version.png");
    background-size: cover;
         width: 22px;
     height: 18px;
   }
}

screen shot

任何帮助将不胜感激！

:)

Answer 1

我建议你先用手机。 请记住，您不能在移动背景图像 (.jpg/.jpeg) 上添加文件类型，这是它不起作用的主要原因。

CSS
.exampleimage{
  background-image: url("Linkedinlogo2.jpg");
  background-size: cover;
  width: 22px;
  height: 18px;
}

@media only screen and (min-width: 501px){
  .exampleimage{
    background-image: url("Linkedinlogo1.jpeg");
    background-size: contain;
    width: 140px;
    height: 18px;
  }
}

Answer 2

可能是您的媒体查询中缺少 .jpeg 吗？

   background-image: url("Linkedinlogo2.jpg");