cssメディアクエリについて調査

基本的に

@media screen and (max-width: 767px) {
    /*なにかの効果*/
}

で呼ぶことができる。

↑の呼び出しを毎回使うのも面倒なので、scssなら

@mixin sp-only {
  @media screen and (max-width: 767px) {
    @content;
  }
}

みたいな感じでmixinにしておけば

@include sp-only {
    /*なにかの効果*/
}

で呼び出すことができる。

stylusでは

sp-only()
  @media screen and (max-width: 767px)
    {block}

+sp-only()
    text-align center

みたいな感じで書くことができる

いろいろな情報について

レスポンシブ メディアクエリ 簡易版

デバイスなど	記載方法
タブレット 縦	@media screen and (max-width: 800px)
スマホ 横	@media screen and (max-width: 768px)
スマホ縦	@media screen and (max-width: 480px)

IOSの幅

デバイス	横で見る画面の幅	縦で見る画面の幅
iPad	1024px	768px
iPhoneXS Max /XR	896px	414px
iPhoneXS	812px	375px
iPhone6 Plus	736px	480px
iPhone6	667px	375px
iPhone 5/SE	568px	320px

iphoneサイズ参考 : https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

androidはいろいろあって面倒なので省略。。。

デバイスを考えて実装するなら

デバイスなど	記載内容
iPad縦向き / iPhone 6 Plus横向き	@media screen and (max-width: 768px)
iPhone 6横向き	@media screen and (max-width: 667px)
iPhone 5/SE横向き	@media screen and (max-width: 568px)
iPhone 6 Plus縦向き	@media screen and (max-width: 480px)
iPhone 6縦向き	@media screen and (max-width: 375px)
iPhone 5/SE縦向き	@media screen and (max-width: 320px)

デバイスの縦向き・横向きで

@media screen and (orientation:portrait) {/* 縦向き */}
@media screen and (orientation:landscape) {/* 横向き */}

cssのファイルで切り分ける

<link rel="stylesheet" href="sp.css" media="screen and (max-width:480px)">

レスポンシブにしたいくらいなら(pc,spを分けるくらい)

しっかり考えたいなら

サイズの切り替えメモ

デスクトップ : 1920px

PC : 1280px

タブレット(ipad想定) : 1024px

携帯電話(その他タブレット) : 767px

iphone5対策用 : 320px