ری‌سپانسیو: viewport و Media Query

قدم صفر: viewport

بدون این خط، موبایل صفحه را خراب نشان می‌دهد:

<meta name="viewport" content="width=device-width, initial-scale=1">

Media Query

/* پیش‌فرض: موبایل */
.grid { grid-template-columns: 1fr; }

/* از ۷۶۸px به بالا */
@media (min-width: 768px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
}

Mobile-First

اول برای موبایل بنویس، بعد با min-width برای بزرگ‌تر اضافه کن. کد تمیزتر و سریع‌تر.

نقاط شکست رایج

@media (min-width: 640px)  { }  /* موبایل بزرگ */
@media (min-width: 768px)  { }  /* تبلت */
@media (min-width: 1024px) { }  /* دسکتاپ */

واحدهای نسبی (rem, fr) و Grid با auto-fit گاهی اصلاً نیاز به media query ندارند.