Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
255
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

Media Queriesの指定について

Media Queriesの指定方法

Media Queriesを使ってcssを読み込む方法は3つ

  1. HTMLのlinkタグのmedia属性に記述
  2. css内に@media記述
  3. css内に@import記述

代表的なmedia type

html
@media all すべて
@media screen   コンピュータ画面
@media print    プリンタ
@media tv   テレビ

1.HTMLのlinkタグのmedia属性に記述

html
<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >

2.css内に@media記述

css
@media all and (min-width: 480px) { ... }

3.css内に@import記述

css
@media all and (min-width: 480px) { ... }

基本の書き方

480ピクセル以上のすべてのメディア・タイプ

css
@media (min-width:480px) { ... }

または

css
@media screen and (min-width:480px){ ... }

500ピクセル、かつ最大幅が 800ピクセルの場合

css
@media screen and (min-width: 500px) and (max-width: 800px) { ... }

allとandは省略できる

css
@media (min-width:480px) { ... }
css
@media all (min-width:480px) { ... }

and区切りで「すべての条件を満たすメディア」

css
@media screen and (min-height: 600px) and (min-width: 300px)

カンマ区切りで「どれかの条件を満たす」(orのような動作)

css
@media screen and (min-height: 600px) and (min-width: 300px), screen and (min-width: 400px), print

振り分けに使う属性

Max Width:
ビューエリアの最大幅。このサイズより小さい場合に適用
Min Width:
ビューエリアの最小幅。このサイズより大きい場合に適用
Max Device Width:
デバイスサイズの最大幅。このサイズより小さい場合に適用
Min Device Width:
デバイスサイズの最小幅。このサイズより大きい場合に適用
Orientation:
縦長か横長かで振り分ける
Device Pixel Ratio:
デバイスの解像度で振り分ける。

縦長か横長かで振り分けるにはOrientation

portrait:縦長の場合
landscape:横長の場合

css
@media screen and (orientation: portrait) {
}
@media screen and (orientation: landscape) {
}

device Pixel Ratio(デバイス・ピクセル比)とresolutionについて

device Pixel Ratioとは

Retinaや高解像度に対応させるプロパティ。デバイス・ピクセルと、CSSピクセルの比率。

css
@media (-webkit-min-device-pixel-ratio: 2){
    ...
}

Safari CSS Reference: Supported CSS Rules

数値は、「2」がRetinaディスプレイ、「1」が標準ディスプレイを示す。

android は 0.7~3までバラバラに混在している。Win8はユーザーが設定できる仕様。

※注意点

device-pixel-ratioは、もともとアップルがRetinaディスプレイを開発した際に、WebKitを独自に拡張したものであってW3Cの標準規格ではないが、後にAndroidやChrome、Firefox、Operaも対応した。
現在は、実装状況がまちまちな上に、今後も高解像度な端末が発売される事が考えられるので、デバイス・ピクセル比だけをキーにスマホ判別させるのは現状では難しい。jsまたはサーバサイドに頼った方が無難。

resolutionとは

W3Cで定められた標準規格。値の指定は3種類。

  1. dpi (1インチ当たりのドット数)
  2. dpcm (1センチメートル当たりのドット数)
  3. dppx (ピクセル当たりのドット数)

現状、Webkit系は、resolutionをサポートしていない。device-pixel-ratioを使用しなければダメ。
そのため、dppxを使用した方がdevice-pixel-ratioの仕様と併せられるので、指定がラク。
https://developer.mozilla.org/ja/docs/Web/CSS/resolution

dppxなら、device-pixel-ratioと数値を合わせられる。

@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx){
・・・
}

記述の順番について

PCファーストで書く場合
PC用のスタイルを定義→スマホ用に上書きしていく

css
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}

モバイルファーストで書く場合
スマホ用→PC用にしていく。但しIE8以下で問題の起きる可能性が高い。

css
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 1200px) {
}

Viewportの指定

Media Queriesを正しく機能させるにはViewportの指定が必要。スマートフォン向けの機能。
最初に読み込まれたときの画面サイズや、拡大縮小の可否指定できる

html
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=0.5,user-scalable=yes,initial-scale=1.0" />

→Viewportについて
デフォルトは980px

IE対応

IE8以下はcss-mediaqueries.js使えばいい

設置の仕方

<head>~</head> 間に

html
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

css-mediaqueries.jsの注意点
1. media typeを省略しない(@media screen andまで記述する)
2. @import使うと効かない
3. link要素のmedia属性も効かない
4. @media記述より前に@charset記述を書くと効かない場合がある(@media記述のみが記載されたcssファイルの冒頭で@charset指定を行うと、css3-mediaqueries.jsが無効になってしまう)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
255
Help us understand the problem. What are the problem?