html - 在平板电脑上显示一张图片，在电脑上显示另一张图片

Question

我有这个问题...我正在运行页面 http://exploreprague.cz .在右上角我有丝带。但是当我在平板电脑上查看它时，它与我的菜单重叠。所以我想如果有办法显示不同的图片(不同种类的丝带，而不仅仅是不同的样式)它就可以工作。但我不知道是否有某种 HTML/CSS/JS 技巧可以做到这一点。谢谢

Answer 1

实现您想要的效果的更好方法之一是使用 CSS3 Media queries .

在针对平板电脑大小分辨率的 CSS 文件中，您可以在该特定图像上设置 display:none，如果您愿意，可以将其替换为更适合您的较小分辨率的新图像.

例如(iPad纵向/横向分辨率):

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  #oldImg { display:none; }
  #newImg { display:block; }
}