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; }
}

Answer 2

以下是如何使用响应式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;

并在较窄的屏幕上切换它们

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

2 个答案: