いろいろ試したけど、このパターンに落ち着いた。
もうホントややこしい。
/*——————————————————–*/
/* screen size 320px以下 ( iPhone縦 )
/*——————————————————–*/
@media screen and (max-width: 320px) {
}
/*——————————————————–*/
/* screen size 321px以上480px以下 ( iPhone横まで )
/*——————————————————–*/
@media screen and (min-width: 321px) {
}
/*——————————————————–*/
/* screen size 481px以上768px以下 ( ipadまで )
/*——————————————————–*/
@media screen and (min-width: 481px) {
}
/*——————————————————–*/
/* screen size 769px以上 ( ipad以上 )
/*——————————————————–*/
@media screen and (min-width: 769px) {
}
メディアクエリーについて、詳しく検証しているサイトがあたので、メモしておく。
「CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き」
( http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/ )
