2

小さな画面のデバイスでも見栄えがするように、ブログをレスポンシブにしたいと考えています。私の友人は、「@media screen」と呼ばれるこの css 関数について教えてくれました。display:none;を使用できます。小さな画面で必要なものを非表示にします。

しかし、その後、display:none;に気付きました。オブジェクトを非表示にするだけで、データをダウンロードします。つまり、モバイル デバイス (画面が小さい) を使用している訪問者は、PC を使用している訪問者と同じくらい多くのデータをダウンロードする必要があります。見たことのないバナーのために数百 KB 相当のデータをダウンロードしなければならない携帯サイトの訪問者はかわいそうです...

だからここに私の質問があります：

「特定のオブジェクト (DIV) を小さい画面にロードしないようにする方法はありますか?」

ありがとうございました

4

4 に答える 4

3

あなたは「レスポンシブ」と言った。レスポンシブの意味は、サイトがすべてのデバイスのすべての画面サイズで表示される必要があるということです。そのため、すべてのリソースをダウンロードし、それに応じて表示/非表示にする必要があります。

それでも、モバイル デバイス用の軽量サイトが必要な場合は、モバイル専用サイトを使用することをお勧めします。

于 2013-06-13T06:22:17.957 に答える
0

あなたの質問に答えるには、要素 (画像、div など) にクラス名を付けて、それらをターゲットにできるようにしてから、CSS でメディア クエリを使用します。

例:
HTML 

<p> some text here <img src="#" class="desktop-only"> </p>

CSS 

@media (max-width: 979px) {  

.desktop-only{
display:none !important;
}

}

好きな組み合わせのメディア クエリを使用して、レイアウトと表示内容を操作できます。詳細はこちら

参考までに、これによりページから要素が削除されますが、それらはほとんどすべてのブラウザーで引き続きダウンロードされるため、モバイル帯域幅が重要な懸念事項である場合は、画像のサイズを自動的に変更する アダプティブ画像などの他のオプションを確認してください.

幸運を！

于 2013-06-13T12:17:09.987 に答える