【CSS】ウィンドウ幅に応じて表示を変える方法（メディアクエリ）

<p>画面の大きさでフォントサイズとカラーが変わります！</p>

p {
  font-size: 16px;
  color: red;
  text-align: center;
}

/* 画面幅が768px以上のときのスタイル（タブレット以上のサイズ向け） */
@media (min-width: 768px) {
  p {
    font-size: 20px;
    color: blue;
  }
}

/* 画面幅が1280px以上のときのスタイル（デスクトップ向け） */
@media (min-width: 1280px) {
  p {
    font-size: 24px;
    color: black;
  }
}

<p id="p-1">768px未満の画面サイズです！（スマホ想定）</p>
<p id="p-2">1280px未満の画面サイズです！（タブレット想定）</p>
<p id="p-3">1280px以上の画面サイズです！（PC想定）</p>

p {
  font-weight: bold;
  text-align: center;
}

#p-1 {
  font-size: 16px;
  color: red;
}

#p-2 {
  font-size: 20px;
  color: blue;
  display: none;
}

#p-3 {
  font-size: 24px;
  color: black;
  display: none;
}

/* 画面幅が768px以上のときのスタイル（タブレット以上のサイズ向け） */
@media (min-width: 768px) {
  #p-1 {
    display: none;
  }

  #p-2 {
    display: block;
  }
}

/* 画面幅が1280px以上のときのスタイル（デスクトップ向け） */
@media (min-width: 1280px) {
  #p-2 {
    display: none;
  }

  #p-3 {
    display: block;
  }
}

<div>
  <div id="box-1"></div>
  <div id="box-2"></div>
  <div id="box-3"></div>
</div>

#box-1 {
  width: 80%;
  height: 100px;
  background-color: skyblue;
  margin: 0 auto;
}

#box-2 {
  width: 80%;
  height: 100px;
  background-color: tomato;
  margin: 0 auto;
}

#box-3 {
  width: 80%;
  height: 100px;
  background-color: limegreen;
  margin: 0 auto;
}

/* 画面幅が768px以上のときのスタイル（タブレット以上のサイズ向け） */
@media (min-width: 768px) {
  div {
    display: flex;
    justify-content: center;
  }
}

/* 画面幅が1280px以上のときのスタイル（デスクトップ向け） */
@media (min-width: 1280px) {
  #box-1 {
    flex: 2;
  }

  #box-2 {
    flex: 1;
  }

  #box-3 {
    flex: 1;
  }
}