Question

当我的网站转到平板电脑/手机尺寸时，我想要一个不同的徽标图像。我认为最好的方法是在div中设置img src，将徽标设置为背景图像到我的div / id。

当我的页面低于990像素时，会显示不同的移动徽标。

这就是我所拥有的，它有效，但这是正确的方法吗？

    <div id="logo"><a href="/home"></a></div>

    #logo  {
        background-image:url('http://i.imgur.com/O49APFa.jpg');
        background-repeat: no-repeat;
        display:block;
        width:452px;
        height:62px;
    }

    @media (max-width:990px) {
    #logo  {
        background-image:url('http://i.imgur.com/CNYdTsD.jpg');
        background-repeat: no-repeat;
        display:block;
        width:452px;
        height:62px;
    }
    }

Answer 1

这是解决这个问题的正确方法。还有其他方法，但在我看来这可能是最好的。

但你可以减少CSS

   <div id="logo"><a href="/home"></a></div>

#logo  {
    background-image:url('http://i.imgur.com/O49APFa.jpg');
    background-repeat: no-repeat;
    display:block;
    width:452px;
    height:62px;
}

@media (max-width:990px) {
    #logo  {
        background-image:url('http://i.imgur.com/CNYdTsD.jpg');
    }
}

您对不同的屏幕使用相同的CSS，这样您就没有不必要的重复代码。因为你没有改变＆＃34; @media中的其他值。＆＃34;阻止，他们只是保持不变。

Answer 2

正确的方法是初始化徽标大小，然后调整大小以获得最大屏幕和设备宽度，如下所示。确保包括设备宽度，以便在移动设备上进行说明。

#logo  {
background-image:url('http://i.imgur.com/O49APFa.jpg');
background-repeat: no-repeat;
display:block;
width:452px;
height:62px;
}


@media only screen and (max-width:500px) and (min-device-width : 768px) { 
    #logo {
      width:200px; 
      height:20px; 
    }  
}

Answer 3

它可以工作，但在这种情况下通常你会使用移动优先的方法，因为桌面徽标/图像通常较大，而且根本不会在移动设备上加载（=减少带宽），例如： / p>

#logo  {
            background-image:url('http://i.imgur.com/CNYdTsD.jpg');/* mobile logo */
            background-repeat: no-repeat;
            display:block;
            width:452px;
            height:62px;
}
@media (min-width:991px) {
  #logo  {
            background-image:url('http://i.imgur.com/O49APFa.jpg'); /* desktop logo */
  }
}

另外，避免重复已经存在的东西（如“display：block”等）

在特定宽度的div中激活新徽标

3 个答案: