画面サイズに応じて適用するスタイルを変更する方法

利用シチュエーション

• デバイスサイズに応じて適用するスタイルを変更したい時

記述方法

デバイスの幅で適用するCSSをCSSファイルに直接記載

qiita.rb

@media screen and (min-width:横幅サイズ) {
  ."クラス名"{
  }
}

/* 記述例 */
@media screen and (min-width:480px) and (max-width:768px) {
  .sample{
  /* ここに適用したいCSSを記載 */
  }
}

デバイスの幅で読み込ませるCSSを変更

qiita.rb

<link rel="stylesheet" href="style.css" media="screen and (max-width:横幅サイズ)">

<!-- 記述例 -->
<link rel="stylesheet" href="style.css" media="screen and (max-width:1040px)">

Tips

• スマートフォンの縦表示・横表示で適用するCSSを変更する方法

qiita.rb

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

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

デバイスサイズの目安

デバイス	サイズ
スマートフォン	480px
タブレット	768px
PC	1040px