Question

1）我如何选择此div下的图像仅用于徽标？

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

会不会？

#logo.src {

}

2）理想情况下，当我的页面达到一定大小时，我想引用一个不同的较小徽标。我可以在div中添加徽标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

Answer 2

仅定位img：

#logo a img {
 /*style*/
}

请阅读：http://alistapart.com/article/using-responsive-images-now

而且：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

调整不同大小的徽标并选择

2 个答案: