在平板电脑上显示一张图片并在PC上显示不同的图片

我遇到此问题...我正在运行页面http://exploreprague.cz。在右上角我有丝带。但是当我在平板电脑上查看它时，它与我的菜单重叠。所以我想，如果有办法展示不同的图片（不同类型的丝带，不只是不同的风格），它可以工作。但我不知道是否有某种可以做到的HTML/CSS/JS技巧。谢谢在平板电脑上显示一张图片并在PC上显示不同的图片

来源

2013-04-10 Mythago

实现你想要的更好的方法之一是使用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; } 
}

来源

2013-04-10 09:53:16 lifetimes

这个工作不错，我只加PC屏幕分辨率间隔在它们之间进行切换。 Thx – Mythago 2013-04-11 14:54:52

虽然这意味着无论您是在平板电脑还是台式机上，这两个图像都可以加载，这可能会降低性能。 – Alfo 2013-04-11 15:00:57

@Alfo真的，但看着问题和它的标签，很难想出一个解决方案，不会涉及上传两个图像。此外，考虑到用户的情况下，它只有一个图像，它不应该影响性能明显，但如果它是很多图像，但它可能是一个不同的故事.. – lifetimes 2013-04-11 15:03:20

下面是如何使用一个响应的CSS的示例：

 Large desktop 
     @media (min-width: 1200px) { 
      #largeImage{ 
       display: inline; 
      } 
      #smallImage{ 
       display: none; 
      } 
     } 

     Portrait tablet to landscape and desktop 
     @media (min-width: 768px) and (max-width: 979px) { 
      #largeImage{ 
       display: none; 
      } 
      #smallImage{ 
       display: inline; 
      } 
     } 

     Landscape phone to portrait tablet 
     @media (max-width: 767px) { 
      /* do the same as tablets or include this width range in the tablet style*/ 
     } 

     Landscape phones and down 
     @media (max-width: 480px) { 
      /* do the same as tablets or include this width range in the tablet style*/}

根据只需设置图像显示属性屏幕的宽度。使用2个图像一个与

display: none;

，另一个是：

display: inline;

和较窄的屏幕

来源

2013-04-10 10:02:53

开头第二个答案没有包含示例，所以我想它会加入更多信息。 – 2013-04-10 10:12:30

谢谢，当我在我的电脑时，我一定会尝试两种方式，我会告诉您哪种解决方案更适合我的问题。 – Mythago 2013-04-10 10:23:17

所以我终于尝试过了，但是现在，当我看到它时，在我的电脑屏幕上它不会显示，并且在我的平板电脑上可以看到两个重叠的图片。我的平板电脑是iPad，我的电脑屏幕分辨率是1366x768 – Mythago 2013-04-11 14:30:40

在平板电脑上显示一张图片并在PC上显示不同的图片

回答

相关问题