📐 Breakpoint Standards

• Mobile: up to 640px (design at 375)
• Tablet: 641-1024px
• Desktop: 1025px+
• Large: 1440px+

Tailwind defaults: sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536. Memorize them.

📱 5 Mobile-First Principles

① Touch Targets: 44px Minimum

Apple HIG and Material standard. Spacing between buttons at least 8px.

② Never Go Below 16px Fonts

iOS auto-zooms form inputs below 16px. Body text 17-18px recommended.

③ Constrain Line Width

50-75 chars per line reads best. Mobile is natural; desktop needs max-width:680px or so.

④ Be Careful With Hamburger Menus

If you have 3 or fewer main items, a bottom tab bar beats hamburger. Hamburger has low discovery.

⑤ srcset on Images Is Required

Do not send a 1920px image to a phone. Download speed = bounce rate.

🔧 CSS Pattern

/* Mobile default */
.container { padding: 1rem; }

/* Tablet+ */
@media (min-width: 768px) {
  .container { padding: 2rem; max-width: 720px; margin: 0 auto; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 960px; }
}

🛠 Tools

• Device mockup: iPhone Mockup
• Image resize: Resize
• Social sizes: Size Calculator

💡 Verify: do not trust Chrome DevTools device mode alone. Test on a real phone. Borrow a friend's if you must.