おぼえられないから

ただただ自分の覚え書きのためです。

個人的な覚書なので見ても役に立ちませんよ。

最近、のメディアクエリを使ったレスポンシブデザインの作り方についての覚書

メディアクエリの記述スタイル

HTMLに下準備

<head>

<meta name=“viewpoint” content=“width=device-width, initial-scale=1.0”>

を記述


CSS

@media (min-width: 700px) { CSSの内容 }

ここでは 700px以上の画面の場合に{ } 内のCSSを適応するという内容になる

もしくはメディアタイプを入れた記述

@media screen and print (min-width: 700px) { CSSの内容 }

デバイス画面と印刷プレビューを含む画面サイズが700pxを越えた時に{ } 内のCSSを適応


豆知識 メディアタイプについて

3種類のメディアタイプが用意されている 

all 全てのデバイス

screen print以外の全てのデバイス

print 印刷プレビューの画面


印刷用のレイアウトは一般的には考えなくても良いので

メディアタイプを記述しない方法でいい


簡単な方法は スマホ用のCSSとPC用のCSSの2種類を用意して

PC用CSSを @media で囲えば使い分けることができる

CSS記述例

スマホ用CSS

@media (min-width: 700px) { PC用CSS }

これでデバイスの画面が700pxを越えたら PS用CSS が適応される

ただし、この場合のデメリットはCSSの記述が多くなるので

指定ピクセルを越えても変わらないCSSは外して内容をシェイプアップさせるか一つ一つのCSSに必要に応じて @media を記述していくのが一般的


min-width の反対は max-width: 700px で

画面が700px以下の場合、適応する

コメント

コメントフォーム
評価する
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット
  • 1
  • 2
  • 3
  • 4
  • 5
  • リセット