1

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

4

2 回答 2

1

实现您想要的更好的方法之一是使用CSS3 媒体查询。

在针对平板电脑大小分辨率的 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-10T09:53:16.043 回答
1

以下是如何使用响应式 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-10T10:02:53.750 回答