CSS メディアクエリのチートシート、モバイルファースト用、スマホ・タブレットのデバイス用のメディアクエリ

WebページでCSSのメディアクエリを使用する際にベースとなるメディアクエリ、モバイルファースト用のメディアクエリ、スマホ・タブレットの主要デバイス用のメディアクエリのチートシートをまとめました。

CSS メディアクエリのチートシート

CSS Media Query Cheat Sheet -GitHub

メディアクエリ: 基本

デスクトップ・タブレット・スマホにおいてベースとなるメディアクエリです。

ベースとなるメディアクエリ

1280px, 768px, 360pxを使ったレスポンシブ対応のグリッド設計は、以前の記事をご覧ください。

レスポンシブ対応のグリッド デザイン徹底解説

レスポンシブ対応のレイアウト・グリッドデザイン徹底解説

メディアクエリ: モバイルファースト

CSSフレームワーク「Foundation」で使用されている、モバイルファーストのメディアクエリです。

各デバイスごとのメディアクエリ

メディアクエリ: iPhone、iPad、およびRetinaディスプレイ

スマホの縦長・横長、iPhone、iPad、およびRetinaディスプレイ用のメディアクエリです。

さらに、細かく分類することもできます。
参考: Media Queries for Standard Devices

iPhone 12, Pro, Miniのメディアクエリ

参考: iPhone 12で、ビューポートのサイズの種類が増えすぎ!デバイスの複雑さがUIの設計にどのように影響するのか

iPad Pro, Apple Watchのメディアクエリ

GalaxyやGoogle Pixelも、細かく分類することもできます。

viewportの設定

HTMLにmetaタグを使用して、ビューポートを定義します。

name
文書情報の種類
content
文書情報の内容
width
幅、デフォルトは960
device-widthは、デバイスの幅に合わせる
initial-scale
初期のズーム倍率、デフォルトは1
maximum-scale
最大倍率、デフォルトは1.6
user-scalable
ズームの操作、デフォルトはyes

上記のメディアクエリの動作は、下記ページで確認できます。アクセスしたデバイスのメディアクエリによる情報が表示されます。

サイトのキャプチャ

デモページ

sponsors

top of page

©2021 coliss