CSS3: 最新 Bootstrap 対応 iOS メディアクエリのテンプレート

Bootstrap のグリッドシステムを利用し、iOS 各デバイスに対応した SCSS メディアクエリを作成しました。
現時点での最新 iOS デバイスである iPad Pro 10.5 にも対応しています。

スタイルコーディング時のテンプレートとしてご活用ください。

目次

  • Bootstrap 対応 iOS メディアクエリ(SCSS)
  • まとめ

Bootstrap 対応 iOS メディアクエリ (SCSS)

冒頭のコメントに Bootstrap と既存 iOS デバイスのサイズを明記しておきました。
デバイスの向きは Portrait ベースで作成しており、ネストされた orientation のコメントを解除しなければ、単体で CSS としても利用可能です。

@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) {}
}

まとめ

モバイルファーストから更に iOS に完全対応し、Android と PC は Bootstrap で吸収する方針で記述すると、以上のようになるかと思います。
スクリーン解像度の種類がこれ以上増えなければいいのですが、次の iPhone でまた一つ増えることになりそうです。。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents