CSS3 media queryの実施メモ & media queryがかっこ良く実装されているサイト事例集

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

Braindump on Responsive Web Design


  
css3が本格導入されてから結構たちますが
media queryを意識したサイトってまだ全てに浸透している訳ではありません。
 
でもこれからの制作ではiphone tablet PC mobile…
避けて通れない考え方だと思いますのでちょっと復習がてらに参考になる動画を
 

タグメモはコチラ

<!– 幅480px以下に適応 –>

@media (max-width:480px) {
.ex {background: #F00;}
}

<!– 幅480px以上に適応 –>

@media (min-width:480px) {
.ex {background: #F00;}
}

<!– スマートフォンのディバイス幅を480pxに指定 –>

@media (max-device-width:480px) {
.ex {background: #F00;}
}


 
フルプラウザ対策からフルディバイス対策へ
これからは本基準を意識して設計をしなければならないと思います。
 
このサイトも改造しなきゃ!!!
 

メディアクエリをかっこ良く実装しているサイト事例集

 

 
ウィンドウのサイズを色々かえてみてください。結構面白いですよ♪