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

【问题标题】：Activate a new logo within a div at certain width在特定宽度的 div 中激活新徽标
【发布时间】：2016-05-10 01:07:55
【问题描述】：

当我的网站变为平板电脑/移动设备尺寸时，我希望使用不同的徽标图像。我认为最好的方法是不要在 div 中使用 img src，而是将徽标设置为我的 div/id 的背景图像。

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

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

https://jsfiddle.net/omca16oe/

    <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;
    }
    }

【问题讨论】：

如果它有效......它是正确的。你能用其他方式做吗……当然……但这并不能使它们更正确。
可以使用这个方法，只要删除额外的重复代码，如宽度和高度，如果它与桌面版本相同并且也是背景重复
还有其他方法可以做到吗？也许是 CSS 精灵？
有几种方法，但这不是问题所在。如果这是你的问题，那就太宽泛了，太离题了。
@Paulie_D 问题是“这是正确的方法吗？”

标签： html css media-queries

【解决方案1】：

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

#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 */
  }
}

另外，避免重复已经存在的内容（例如“显示：块”等）

【讨论】：

【解决方案2】：

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

但是你可以减少 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，这样您就没有不必要的重复代码。因为您没有更改“@media..”块中的其他值，所以它们保持不变。

【讨论】：

【解决方案3】：

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

#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; 
    }  
}

【讨论】：