メディアクエリ (media) を使ったレスポンシブデザイン – browser-land

メディアクエリ (media) を使ったレスポンシブデザイン

 CSSでメディアクエリを用いたレスポンシブデザインの書き方

@mediaをCSSに記述する事でWebページを見ている人のメディアタイプを取得します。
レスポンシブ対応にはscreenを使いますが、他にも以下のメディアタイプがあります。

* screen : ディスプレイ
* print : プリンタ
* tv : テレビ
* projection : プロジェクター
* all : すべて

・画面サイズ 480px~

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

・画面サイズ 768px~1024px

@media screen and (min-width:768px) and ( max-width:1024px) {}

 Viewport パーセンテージを用いて縦長・横長デザインを切り替える

一般的に CSS で要素の幅や高さを指定する際は px や % といった単位を使いますが、
最近のブラウザでは、この他に vw, vh, vmin, vmax という単位を使うことが出来ます。
vw の v は Viewport のイニシャルで、それぞれこのような意味を持っています。

* vw : Viewport の幅に対する割合
* vh : Viewport の高さに対する割合
* vmin : Viewport の幅と高さのうち、値が小さい方に対する割合
* vmax : Viewport の幅と高さのうち、値が大きい方に対する割合

画面の横の長さをvhと比較する事でページのデザインが縦長か横長かを判断します。
以下のサンプルでは
横と縦の比率が100対129以上ならば横長デザインに
横と縦の比率が100対128以下ならば縦長デザインに分岐しています。

@media screen and (min-width:129vh) {}
@media screen and (max-width:128vh) {}
Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード