RIEMITSU

メディアクエリー　スマホスクリーンの縦横別で指定を変える

Web

スマホサイトを作成する上で、縦向き横向きでサイズを指定しなければならない時に便利です。私の場合、htmlはPC用サイトと共有でCSSだけかえる時、画像をリストに入れてならべたりするときなんかに良く使います。

 ⇒例）☆/*縦向きの際に適用*/☆

@media only screen and (orientation : portrait) { /*ここに縦向き時の指定を描きます*/ }

 ⇒例）☆/*横向きの際に適用*/☆

@media only screen and (orientation : landscape) {/*ここに横向き時の指定を描きます*/ }

例で説明しますと、クラスprofileの中の8枚の画像にリストタグを付け、縦、横、それぞれの時に
均等に並べたいとします。
そうして、縦の時には1行に画像は2枚、横の時には画像は4枚並ばせたいとします。

1.画像を覆うリスト(li)の幅指定を縦の時50%、横の時25%指定します。
※このときの画像(の幅指定は同一でもかまいません、%のほうがよいかも、ただし、画像が伸びすぎる恐れがあるときはmax-widthの指定をいれておくとよいかもしれません。)

⇒例）縦の場合の設定

@media only screen and (orientation : portrait) { .profile li{ width:50%; height:auto; float:left;} }

 ⇒例）横の場合の設定

@media only screen and (orientation : portrait) { .profile li{ width:25%; height:auto; float:left;} }

これとても便利なのですが、慣れないうちは中かっこ”｛ ｝”の閉じを一つ忘れてしまうことが多々あったりするので要注意。。
・・・でも、私だけかもしれませんが。。。。

2012年10月26日