Question

移动大小的浏览器的设计与全屏浏览器的设计有很大不同。我提出了一个有效的解决方案（显示：无;），但这是一个很好的方法吗？我应该做别的事吗？

@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>

Answer 1

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

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

Answer 2

在移动设备上看起来不正常的一些元素应该像这样隐藏。但是在大多数情况下，所有内容都可以调整大小，移动或最小化，并且能够通过点击（如菜单）进行最大化。

Give this a read for more tips

Answer 3

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

@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');
}
}

响应式网站内容

3 个答案: