Question

您好，我想根据在移动设备上查看的页面大小来显示不同的徽标。

如果页面宽度大于1025px或更多，我想显示图像；如果屏幕尺寸在600到1025px之间，则显示另一幅图像；如果屏幕尺寸最大为300px，则显示另一幅图像。我只想显示一张图片。无论我尝试什么，我都会全部显示三个或仅显示一个。谁能启发我。谢谢

@media only screen and (max-width: 1025px) {
#logo768 { display: none;}
#logo1025 { display: none;}
}
@media only screen and (max-width: 600px) {
#logo1025 { display: none;}
#logo300 { display: none;}
}
@media only screen and (min-width: 399px) {
#logo768 { display: none;} 
#logo1025 { display: none;}
}

Answer 1

请考虑使用picture。这是一种更优雅的方法，更易于维护。 <img>是视口小于400px时使用的默认图像。

来自MDN：

HTML <picture>元素包含零个或多个<source>元素，并且一个<img>元素以提供不同图像的版本显示/设备方案。浏览器将考虑每个孩子 <source>元素并在其中选择最佳匹配；如果没有匹配找到<img>元素的src属性的URL。然后，选定的图像将显示在由 <img>元素。

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

<picture>
  <source 
    media="(min-width: 1024px)"
    srcset="https://placekitten.com/1024/400">
  <source 
    media="(min-width: 768px)"
    srcset="https://placekitten.com/768/300">
  <source 
    media="(min-width: 400px)"
    srcset="https://placekitten.com/400/200">
  <img src="https://placekitten.com/300/200" alt="one or more kittens" />
</picture>

jsFiddle

Answer 2

像这样？

#logo768 { display: none;}
#logo300 { display: none;}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
#logo768 { display: block;}
#logo1025 { display: none;}
}
@media only screen and (max-width: 300px){
#logo300 { display: block;}
#logo1025 { display: none;}
}

css显示屏幕尺寸是否大于或等于1200

2 个答案: