0

移动尺寸浏览器的设计与全屏浏览器的设计有很大不同。我想出了一个可行的解决方案（显示：无；）但这是一个好方法吗？我应该做点别的吗？

@media only screen
and (max-width:480px){
#image01{
    /* sizing and positioning etc*/
    display:none;
}
#image02{
    /* sizing and positioning etc*/
}
h1#big{
    /*sizing and positioning etc */
    display:none;
}
h1#small{
    /*sizing and positioning etc */
}
@media only screen
and (min-width:992px){
#image01{
    /* sizing and positioning etc*/
}
#image02{
    /* sizing and positioning etc*/
    display:none;
}
h1#big{
    /*sizing and positioning etc */
}
h1#small{
    /*sizing and positioning etc */
    display:none;
}



<div id="image01">
    <img src="image01.jpg" alt="image01" />
</div>
<div id="image02">
    <img src="image02.jpg" alt="image02" />
</div>
<h1 id="big">Big header</h1>
<h1 id="small">Small header</h1>
4

3 回答 3

1

您不应该使用display: none从较小的屏幕上隐藏内容，因为它被视为一种懒惰的方法。

此外，从性能的角度来看，这也很糟糕，因为您的用户仍然会下载此内容，尽管它被明显隐藏了。

于 2013-06-17T10:38:59.860 回答
0

除非这些图像是内容的一部分，否则您应该将它们加载为背景图像。然后你控制在你的媒体查询中加载哪个图像

@media only screen
and (max-width:480px){
#image01{
    /* sizing and positioning etc*/
    background-image:none;
}
}

@media only screen
and (max-width:992px){
#image01{
    /* sizing and positioning etc*/
    background-image:url('path/to/image');
}
}
于 2013-06-17T21:23:19.833 回答
0

一些在移动设备上看起来不正确的元素应该像这样隐藏。然而，在大多数情况下，一切都可以调整大小、移动或最小化，并能够通过点击最大化（如菜单）。

阅读本文以获取更多提示

于 2013-06-17T10:39:47.767 回答