Bootstrap のグリッドシステムを利用し、iOS 各デバイスに対応した SCSS メディアクエリを作成しました。
現時点での最新 iOS デバイスである iPad Pro 10.5 にも対応しています。
スタイルコーディング時のテンプレートとしてご活用ください。
目次
- Bootstrap 対応 iOS メディアクエリ(SCSS)
- まとめ
Bootstrap 対応 iOS メディアクエリ (SCSS)
冒頭のコメントに Bootstrap と既存 iOS デバイスのサイズを明記しておきました。
デバイスの向きは Portrait ベースで作成しており、ネストされた orientation のコメントを解除しなければ、単体で CSS としても利用可能です。
[code]
@charset “utf-8”;
/* Note
================================================== */
// Bootstrap Grid Breakpoints
// Extra small screen / phone
// xs: 0,
// Small screen / phone
// sm: 576px,
// Medium screen / tablet
// md: 768px,
// Large screen / desktop
// lg: 992px,
// Extra large screen / wide desktop
// xl: 1200px
//
// iOS Device Resolution(Portrait)
// iPhone 4/3GS -> width: 320px; hight: 480px;
// iPhone 5/SE -> width: 320px; hight: 568px;
// iPhone 7/6 -> width: 375px; hight: 667px;
// iPhone Plus -> width: 414px; hight: 736px;
// iPad 9.7 -> width: 768px; hight: 1024px;
// iPad Pro10.5 -> width: 834px; hight: 1112px;
// iPad Pro12.9 -> width: 1024px; hight: 1366px;
//
/* Media Query
================================================== */
// XS | ALL Phones
// XS+| iPhone (Portrait) | iPhone SE/5 (Landscape)
@media(min-width: 320px) {
// iPhone (Portrait)
// iPhone SE/5 (Landscape)
// @media(orientation: landscape) {}
}
// SM | iPhone 7/6/Plus (Landscape)
@media(min-width: 576px) {
// Common / iPhone 7/6/Plus (Landscape)
}
// MD | iPad 9.7 (Portrait) | PC
@media(min-width: 768px) {
// PC (Common)
// iPad 9.7 (Portrait)
// @media(orientation: portrait) {}
}
// LG | iPad Pro 12.9 / 10.5 (Portrait) | iPad 9.7 (Landscape) | PC
@media(min-width: 992px) {
// PC (Common)
// iPad Pro 12.9 / 10.5 (Portrait)
// @media(orientation: portrait) {}
// iPad 9.7 (Landscape)
// @media(orientation: landscape) {}
}
// XL | iPad Pro 12.9 / 10.5 (Landscape) | PC
@media(min-width: 1200px) {
// PC (Common)
// iPad Pro 12.9 / 10.5 (Landscape)
// @media(orientation: landscape) {}
}
[/code]
まとめ
モバイルファーストから更に iOS に完全対応し、Android と PC は Bootstrap で吸収する方針で記述すると、以上のようになるかと思います。
スクリーン解像度の種類がこれ以上増えなければいいのですが、次の iPhone でまた一つ増えることになりそうです。。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
