使用@media 标签,如何显示新图像,例如,我有一个要用于我的主站点的 Logo 和一个用于我的移动站点的移动 Logo ,如何仅在使用@media 的移动网站?
我已经使用 "display:url('xxxx') 进行了绑定(bind),但这似乎没有用。
最佳答案
您必须在您的 HTML 上放置两个 Logo ,如下所示:
<img src="" class="desktop-logo">
<img src="" class="mobile-logo">
然后,您必须默认隐藏移动 Logo :
.mobile-logo {
display: none;
}
然后,在您的媒体查询中,您必须隐藏桌面 Logo 并显示移动 Logo :
@media screen and (max-width: 480px) {
.desktop-logo {
display: none;
}
.mobile-logo {
display: block;
}
}
关于html - 使用@media 显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29498939/