响应式网站内容

Question

移动浏览器的设计与全屏浏览器的设计有很大的不同。我已经想出了一个可行的解决方案(display:none;)，但这是一个好方法吗？我应该做些别的事情吗？

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