スクリーンサイズ(px)に応じて適用するcssを切り替える事が出来ます。

考え方

画面サイズが ~ 以上の場合

画面サイズが XX px 以上の場合に割り当てたいスタイルを指定するには、cssへ以下のように記載します。

/*　通常適用されるスタイル　*/
.box-test {
  width: 100%;
  height: 100px;
  background-color: aqua;
}

/*　画面サイズが680pxからはここを読み込む　*/
@media screen and (min-width:680px) {
  .box-test {
    background-color: blueviolet;
  }
}

画面サイズが ~ 以下の場合

画面サイズが XX px 以下の場合に割り当てたいスタイルを指定するには、cssへ以下のように記載します。

/*　通常適用されるスタイル　*/
.box-test {
  width: 100%;
  height: 100px;
  background-color: aqua;
}

/*　画面サイズが680pxまではここを読み込む　*/
@media screen and (max-width:680px) {
  .box-test {
    background-color: blueviolet;
  }
}

例

min-width

min-width を指定し〜px からはというような指定をします。

HTML

<div class="box-test"></div>

CSS

/*　通常適用されるスタイル　*/
.box-test {
  width: 100%;
  height: 100px;
  background-color: aqua;
}

/*　画面サイズが700pxからはここを読み込む　*/
@media screen and (min-width:700px) {
  .box-test {
    background-color: blueviolet;
  }
}

/*　画面サイズが800pxからはここを読み込む　*/
@media screen and (min-width:800px) {
  .box-test {
    background-color: yellowgreen;
  }
}

結果

PCのブラウザで表示している場合、ブラウザのサイズを変えると確認出来ます。スマートフォンからだと縦表示を横表示にすると確認できるかもしれません。

max-width

max-width を指定し〜px まではというような指定をします。

HTML

<div class="box-test"></div>

CSS

/*　通常適用されるスタイル　*/
.box-test {
  width: 100%;
  height: 100px;
  background-color: aqua;
}

/*　画面サイズが1000pxまではここを読み込む　*/
@media screen and (max-width:1000px) {
  .box-test {
    background-color: blueviolet;
    
  }
}

/*　画面サイズが700pxまではここを読み込む　*/
@media screen and (max-width:700px) {
  .box-test {
    background-color: yellowgreen;
  }
}

結果

min-width と max-width

min-width と max-width は両方指定出来ます。

CSS

/*　通常適用されるスタイル　*/
.box-test {
  width: 100%;
  height: 100px;
  background-color: aqua;
}

/*　画面サイズが700px以上、800pxまではここを読み込む　*/
@media screen and (min-width:700px) and (max-width:800px) {
  .box-test {
    background-color: blueviolet;
  }
}

/*　画面サイズが800pxからはここを読み込む　*/
@media screen and (min-width:800px) {
  .box-test {
    background-color: yellowgreen;
  }
}

結果

注意

CSSの記載は後勝ちになります。従って、以下のように記載すると意図した動きになりません。

この場合、スクリーンサイズ1000pxまでの指定が有効になるので、スクリーンサイズ700pxまでの指定が無効になります。

CSS

/*　通常適用されるスタイル　*/
.box-test {
  width: 100%;
  height: 100px;
  background-color: aqua;
}

/*　画面サイズが700pxまではここを読み込む　*/
@media screen and (max-width:700px) {
  .box-test {
    background-color: yellowgreen;
  }
}

/*　画面サイズが1000pxまではここを読み込む　*/
@media screen and (max-width:1000px) {
  .box-test {
    background-color: blueviolet;
    
  }
}

結果

スクリーンサイズ700pxの指定は無効になるので、yellowgreen の色は表示されません。

最後に

特にありません。