在一定宽度的 div 内激活一个新标志

Question

当我的网站达到 tablet/mobile 大小时，我希望有一个不同的徽标图像。我认为最好的方法是不要在 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，这样您就没有不必要的重复代码。因为您没有更改“@media..”块中的其他值，所以它们保持不变。

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

它可以工作，但通常在这种情况下您会使用移动设备优先的方法，因为桌面 logos/images 通常更大并且根本不会加载到移动设备上（= 减少带宽） , 比如:

#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 内激活一个新标志

Activate a new logo within a div at certain width

html

css

media-queries