html - 调整不同尺寸的标志并选择

Question

1) 我如何选择此 div 下的图像仅用作 Logo ？

 <div id="logo"><a href="myurl.com"><img src="mysite.com/logo.jpg" title="My Logo" alt="My Website"></a></div>

会是吗？

#logo.src {

}

2) 理想情况下，当我的页面达到一定大小时，我想引用一个不同的较小 Logo 。我可以在 div 中添加 Logo src 作为背景图像，然后在样式表中引用它吗？

eg for 768px
#logo {
background-image: url('/logo-768px.jpg');
background-repeat: no-repeat;
}

然后

eg for 480px
#logo {
background-image: url('/logo-480px.jpg');
background-repeat: no-repeat;
}

Answer 1

第二种选择:

把这个加到你的头上:

<meta name="viewport" content="width=device-width, initial-scale=1">

你的 CSS 将是:

@media screen and (max-device-width: 767px){ /* From 0px to 767px */
  #logo {
    background-image: url('/logo-480px.jpg');
    background-repeat: no-repeat;
  }
}
@media screen and (min-device-width: 768px){ /* From 768px and up */
  #logo {
    background-image: url('/logo-768px.jpg');
    background-repeat: no-repeat;
  }
}

viewport 标签定义屏幕的宽度并使 CSS device-width 起作用。我可以尝试自己解释，但有很多关于它的好文章:https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag