モバイルレスポンシブ

レスポンシブでモバイルファーストのウェブアプリケーションを構築します。

モバイルファースト ブレークポイント

/* Mobile first - no media query needed for mobile base */
.container {
  padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Large desktop */
@media (min-width: 1280px) {
  .container {
    max-width: 1400px;
  }
}

Tailwind ブレークポイント

<div className="
  p-4          /* Mobile: padding 1rem */
  md:p-8       /* Tablet 768px+:

...