0

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

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

我正在尝试的代码：

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可以满足大多数现代手机浏览器的标准查询？

这是一个演示

4

1 回答 1

2

根据您的屏幕尺寸，480 像素可能仍然太宽。（如果屏幕尺寸为 480，它不会中断，直到@media screen and (max-width: 479px){因为屏幕宽度为 480 仍然包含在@media screen and (max-width: 480px){

更多统计信息：移动和桌面屏幕尺寸统计信息

于 2013-11-13T16:36:52.203 回答