ページを表示するために使用されているデバイスの幅に応じて、2 つのレイアウトを持つページで作業してきました。
/*Above is Mobile*/
@media screen and (min-device-width: 600px){
/*Below is Web*/
}
このアプローチは基本的に、ページ全体でさまざまな「Web」および「モバイル」の div を取得し、いずれかのレイアウトの必要に応じてそれらを表示、非表示、または変更します。ただし、「web」div は非表示になっていますが、モバイル デバイスによって引き続き読み込まれるため、ページの読み込みが遅くなる可能性があります。
最初に考えたのは、「モバイル」の div のみを定義でき、「ウェブ」の div を定義できなければ、これらの追加要素をすべて読み込まなくて済むのではないかということでした。では、CSS メディア クエリに似た方法が HTML に存在するのでしょうか? あるいは、ページが表示されるデバイスの幅に基づいて 2 つの異なる HTML レイアウトを定義する方法はありますか?
編集: 少なくとも画像とグラフィックに関する限り、より良いアプローチは、HTML ではなく CSS を使用して画像を定義することです。したがって、次のようにする代わりに:
<div id="img"><img src="URL"></div>
...そして div を非表示にしようとすると、代わりに次のアプローチを取ることになります。
<div id="img"></div>
と...
div#img {
background: none;
}
/*Above is Mobile*/
@media screen and (min-device-width: 600px){
/*Below is Web*/
div#img {
background: url(URL);
height: 400px;
width: 600px;
}
}
したがって、モバイル版は画像をロードせず、まだ CSS のみを使用しています。