Question

我是响应式网页设计的新手，我试图隐藏当前的大图像，并在屏幕宽度小于480px宽时显示一个新的小图像。

当我缩小桌面浏览器的宽度时，这看起来效果很好，但是当我导航到手机上的页面时，它仍然显示大图像。

我正在尝试的代码：

HTML：

<div id="wrapper">
    <img src="lrgimg" id="lrgimg" alt="" />
    <img src="smlimg" id="smlimg" alt="" />
    <p>Some text , font size will change depending on device width.</p>
</div>

CSS：

#wrapper{
    margin-right:0 auto;
    margin-left:0 auto;
    padding:10px;
    width:80%;
    border:1px solid red;
}
#smlimg{
    display:none;
    max-width:100%;
    max-height:100%;
}
#lrimg{
    max-width:100%;
    max-height:100%;
}

/* media queries */

@media screen and (max-width: 480px){

    #lrgimg{display:none;}
    #smlimg{display:inline;}

    p{
        font-size:30px;
    }

}

我认为max-width足以满足大多数手机屏幕的宽度，但显然即使屏幕宽度保持不变，分辨率也会大幅增加。

我的问题是：我是否可以使用标准@media查询来满足大多数现代手机浏览器的需求？

这是一个demo

Answer 1

根据您的屏幕尺寸，480px可能仍然太宽。（如果屏幕尺寸为IS 480，则在@media screen and (max-width: 479px){之前不会中断，因为@media screen and (max-width: 480px){

中仍然包含480的屏幕宽度

此处有更多统计信息：Mobile and desktop screen size statistics

尝试根据设备宽度隐藏和显示图像

1 个答案: