iPhone SEと新型iPad proが発売されました。
見た目のデザインは従来のものとほとんど変わらないようです。
iPad Proからは12.9インチと9.7インチが登場。「ほとんどのポータブルPCをしのぐ驚異的なパワー」と豪語するほどのスペックを搭載。いよいよノートパソコンを使わなくなる時代が迫ってきている予感を感じさせます。
そしてモバイルデバイスの新商品が発売されると制作者が気になるのはメディアクエリ。
iPhone SEは4インチのRetinaディスプレイと6sからサイズダウンしました。
ディスプレイサイズが1,136 x 640ピクセル解像度、326ppiなのでiPhone 5sと同じになります。
iPhone SE
|
1 2 3 4 5 |
@media screen and (max-width:320px) { /*iPhone 5, 5s, seに適用させたいCSSを記述*/ } |
9.7インチiPad Proは2,048 x 1,536ピクセル解像度、264ppiなので従来のipad、Air、miniなどと同じで12.9インチは2,732 x 2,048ピクセル解像度、264ppiなため1024pxになります。
12.9インチiPad Pro
|
1 2 3 4 5 |
@media screen and (max-width:1024px) { /*12.9インチiPad Proに適用させたいCSSを記述*/ } |
9.7インチiPad Pro
|
1 2 3 4 5 |
@media screen and (max-width:768px) { /*9.7インチiPad Proに適用させたいCSSを記述*/ } |
ちなみに上記はポートレイトモード(縦画面)のみでランドスケープモード(横画面)は
iPhone SE：568px
12.9インチiPad Pro：1366px
9.7インチiPad Pro：1024px
となります。