CSS メディアクエリのチートシート、モバイルファースト用、スマホ・タブレットのデバイス用のメディアクエリ
Post on:2021年2月8日
sponsors
WebページでCSSのメディアクエリを使用する際にベースとなるメディアクエリ、モバイルファースト用のメディアクエリ、スマホ・タブレットの主要デバイス用のメディアクエリのチートシートをまとめました。
CSS Media Query Cheat Sheet -GitHub
メディアクエリ: 基本
デスクトップ・タブレット・スマホにおいてベースとなるメディアクエリです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/*------------------------------------------ Responsive Grid Media Queries - 1280, 1024, 768, 480 1280-1024 - デスクトップ（デフォルトのグリッド） 1024-768 - タブレット横長 768-480 - タブレット縦長 480-less - スマホ --------------------------------------------*/ @media all and (min-width: 1024px) and (max-width: 1280px) { } @media all and (min-width: 768px) and (max-width: 1024px) { } @media all and (min-width: 480px) and (max-width: 768px) { } @media all and (max-width: 480px) { } |
1280px, 768px, 360pxを使ったレスポンシブ対応のグリッド設計は、以前の記事をご覧ください。
メディアクエリ: モバイルファースト
CSSフレームワーク「Foundation」で使用されている、モバイルファーストのメディアクエリです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/*------------------------------------------ Foundation Media Queries https://get.foundation/sites/docs/media-queries.html --------------------------------------------*/ /* Small screens - スマホ */ @media only screen { } /* スマホ用のスタイル -モバイルファースト */ @media only screen and (max-width: 40em) { } /* 最大幅640px、スマホ専用のスタイル */ /* Medium screens - タブレット */ @media only screen and (min-width: 40.063em) { } /* 最小幅641px、Mediumスクリーン */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* 最小幅641pxおよび最大幅1024px、タブレット専用のスタイル */ /* Large screens - デスクトップ */ @media only screen and (min-width: 64.063em) { } /* 最小幅1025px、Largeスクリーン */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* 最小幅1025pxおよび最大幅1440px、Largeスクリーン専用のスタイル */ /* XLarge screens */ @media only screen and (min-width: 90.063em) { } /* 最小幅1441px、XLargeスクリーン */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* 最小幅1441pxおよび最大幅1920px、XLargeのスクリーン専用のスタイル */ /* XXLarge screens */ @media only screen and (min-width: 120.063em) { } /* 最小幅1921px、XXLargeスクリーン */ /*------------------------------------------*/ |
メディアクエリ: iPhone、iPad、およびRetinaディスプレイ
スマホの縦長・横長、iPhone、iPad、およびRetinaディスプレイ用のメディアクエリです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/* ポートレイト */ @media screen and (orientation:portrait) { /* ポートレイト（縦長）時のスタイル */ } /* ランドスケープ */ @media screen and (orientation:landscape) { /* ランドスケープ（横長）時のスタイル */ } /* iPhone、iPad、およびRetinaディスプレイ用 */ /* Retinaではない場合 */ @media screen and (-webkit-max-device-pixel-ratio: 1) { } /* Retinaの場合 */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { } /* iPhoneポートレイト */ @media screen and (max-device-width: 480px) and (orientation:portrait) { } /* iPhoneランドスケープ */ @media screen and (max-device-width: 480px) and (orientation:landscape) { } /* iPadポートレイト */ @media screen and (min-device-width: 481px) and (orientation:portrait) { } /* iPadランドスケープ */ @media screen and (min-device-width: 481px) and (orientation:landscape) { } |
さらに、細かく分類することもできます。
参考: Media Queries for Standard Devices
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- iPhone 6+, 7+ and 8+ ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { } /* ----------- iPhone X ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { } /* ----------- iPhone 11 ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- iPhone 12, 12 Pro ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 390px) and (max-device-width: 844px) and (-webkit-min-device-pixel-ratio: 3) { } /* ----------- iPhone 12 Mini ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2.88) { } /* ----------- iPad 1, 2, Mini and Air ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { } /* ----------- iPad 3, 4 and Pro 9.7" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- iPad Pro 10.5" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- iPad Pro 12.9" ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) { } /* ----------- Apple Watch ----------- */ @media (max-device-width: 42mm) and (min-device-width: 38mm) { } |
参考: iPhone 12で、ビューポートのサイズの種類が増えすぎ！デバイスの複雑さがUIの設計にどのように影響するのか
GalaxyやGoogle Pixelも、細かく分類することもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
/* ----------- Galaxy S3 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) { } /* ----------- Galaxy S4, S5 and Note 3 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { } /* ----------- Galaxy S6 ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) { } /* ----------- Google Pixel ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) { } /* ----------- Google Pixel XL ----------- */ /* Portrait and Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) { } |
viewportの設定
HTMLにmetaタグを使用して、ビューポートを定義します。
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
- name
- 文書情報の種類
- content
- 文書情報の内容
- width
- 幅、デフォルトは960
- device-widthは、デバイスの幅に合わせる
- initial-scale
- 初期のズーム倍率、デフォルトは1
- maximum-scale
- 最大倍率、デフォルトは1.6
- user-scalable
- ズームの操作、デフォルトはyes
上記のメディアクエリの動作は、下記ページで確認できます。アクセスしたデバイスのメディアクエリによる情報が表示されます。
sponsors
