レスポンシブ CSS スタイルをモバイル デバイスにのみ適用するにはどうすればよいですか?

モバイル デバイスにのみレスポンシブ CSS スタイルを適用する

レスポンシブ CSS スタイルを作成する場合、意図したデバイスにのみ適用されるようにすることが重要です。モバイル デバイスをターゲットにしているものの、デスクトップ プレゼンテーションへの干渉を防ぐのが難しい場合は、次のアプローチを検討してください。

メディア クエリ範囲の使用

単一のメディア クエリ ブレークポイントを使用する代わりに、ブレークポイントの範囲。これにより、他のデバイスを除外しながら、モバイル スタイルを適用する特定の幅の範囲を指定できます。

幅 480 ピクセルから 1024 ピクセルのデバイスをターゲットとするメディア クエリ範囲の例を次に示します。

<code class="css">@media all and (min-width: 480px) and (max-width: 1024px) {
  /* Mobile styles go here */
}</code>

一般的なデバイス サイズの範囲の定義

最も一般的なデバイス サイズをカバーするには、次の範囲を検討してください。

<code class="css">@media all and (min-width: 0px) and (max-width: 320px)
@media all and (min-width: 321px) and (max-width: 480px)
@media all and (min-width: 569px) and (max-width: 768px)
@media all and (min-width: 769px) and (max-width: 800px)
@media all and (min-width: 801px) and (max-width: 959px)
@media all and (min-width: 960px) and (max-width: 1024px)</code>

EM または % 単位を使用する

スタイルはデバイスの解像度に関係なく適切に拡大縮小されるため、ピクセル単位の使用は避けてください。代わりに、EM または % 単位を選択してください。 EM 単位は親要素のフォント サイズを基準とし、% 単位は要素の合計幅を基準とします。

コード例

メディアを使用したコードの更新バージョンは次のとおりです。クエリ範囲アプローチと EM 単位:

<code class="css">/* Regular desktop styles */

/* Mobile only styles for devices between 480px and 1024px */
@media all and (min-width: 480px) and (max-width: 1024px) {
  /* Mobile styles using EM units */
}</code>

このコードは、デスクトップ スタイルからの分離を維持しながら、モバイル スタイルが指定された幅範囲内のデバイスにのみ適用されることを保証します。

以上がレスポンシブ CSS スタイルをモバイル デバイスにのみ適用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。