Question

我是编码的新手，我一直在试图弄清楚如何更改WordPress主题中的某些元素，其中一个是在桌面上显示完整的LinkedIn图像，但在移动设备上它会切换到更短的logo [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

媒体查询中是否缺少.jpeg？

$(document).ready(function() {

    $('#ConfCalendarBlock').fullCalendar({      

        height:400,
        editable: true,             
        events: modJs.getConfJsonUrl(),         
        loading: function(bool) {
            if (bool) $('#loadingConfCalendarBlock').show();
            else $('#loadingConfCalendarBlock').hide();
        },          
        dayClick: function (date, jsEvent, view) {           
                modJs.getdayclick(date.format());               
        },          
        eventClick: function(calEvent, jsEvent, view) { 
            modJs.getEventClcik(calEvent.id);
        },       

    });

});

Answer 2

我建议您先使用手机。请记住，你不要在移动背景图像（.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;
  }
}

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

2 个答案: