0

モバイル サイズのブラウザーのデザインは、全画面ブラウザーのデザインとは大きく異なります。私はうまくいく解決策を思いつきました（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>
4

3 に答える 3

1

display: none怠惰なアプローチと見なされるため、小さい画面からコンテンツを非表示にするために を使用しないでください。

また、目に見えて隠されているにもかかわらず、ユーザーはこのコンテンツをダウンロードし続けるため、パフォーマンスの観点からも好ましくありません。

于 2013-06-17T10:38:59.860 に答える
0

モバイル デバイスで正しく表示されない一部の要素は、このように非表示にする必要があります。ただし、ほとんどの場合、すべてをサイズ変更、移動、または最小化して、タップで最大化することができます (メニューなど)。

その他のヒントについては、これをお読みください

于 2013-06-17T10:39:47.767 に答える