CSSのブレークポイントのサンプル

/* スマートフォン */
body {
  background-color: lightblue;

  &::before {
    content: "スマートフォン";
  }
}

/* タブレット */
@media (min-width: 768px) {
  body {
    background-color: orange;

    &::before {
      content: "タブレット";
    }
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  body {
    background-color: lightgreen;

    &::before {
      content: "デスクトップ";
    }
  }
}

元記事を表示する