طراحی واکنش‌گرا

کاربران سایت شما روی صفحه‌های متنوعی می‌آیند: گوشی ۳۶۰ پیکسلی، تبلت، لپ‌تاپ و مانیتور بزرگ. طراحی واکنش‌گرا (Responsive Design) یعنی یک صفحهٔ واحد که در همهٔ این اندازه‌ها خوب دیده و استفاده می‌شود؛ نه نسخهٔ جدا برای موبایل. در این درس پایانی دوره، سه ابزار اصلی این کار را می‌آموزید: تگ viewport، پرس‌وجوی رسانه‌ای و واحدهای سیال.

نخستین گام: تگ viewport

پیش از هر CSS، صفحه باید به مرورگر موبایل بگوید عرض صفحه را با عرض دستگاه واقعی بسنجد. بدون این اعلام، مرورگر موبایل صفحه را مثل یک صفحهٔ دسکتاپ با عرض حدود ۹۸۰ پیکسل رندر می‌کند و بعد برای جا شدن در صفحه، همه چیز را کوچک می‌زوم می‌کند؛ نتیجه متنی ریز و استفاده‌ناپذیر است:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Page</title>
</head>

مقدار width=device-width عرض صفحه را برابر عرض واقعی دستگاه می‌کند و initial-scale=1 زوم آغازین را روی ۱ نگه می‌دارد. این سطر را روی هر پروژه‌ای از نخستین روز می‌گذارید.

پرس‌وجوی رسانه‌ای

ابزار اصلی CSS برای جواب دادن به اندازهٔ صفحه، پرس‌وجوی رسانه‌ای (Media Query) است: بلوکی از قواعد که فقط وقتی اجرا می‌شود که شرط آن برقرار باشد:

/* always applies */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* only on screens at least 700px wide */
@media (min-width: 700px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* only on screens at least 1000px wide */
@media (min-width: 1000px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

اول موبایل

ترتیب کد بالا تصادفی نیست. رویکرد استاندارد «اول موبایل» (Mobile First) است: استایل پایه را برای صفحهٔ کوچک بنویسید و بعد با پرس‌وجوهای min-width ویژگی‌های صفحه‌های بزرگ را لایه‌لایه اضافه کنید. مزیت این ترتیب روشن است: صفحهٔ کوچک ساده‌ترین حالت است و قواعد آن را بعداً هیچ‌چیز خراب نمی‌کند؛ برعکس، اگر از دسکتاپ شروع کنید، مدام دارید چیزها را با max-width می‌شکنید و خنثی می‌کنید.

واحدهای سیال

پرس‌وجوهای رسانه‌ای پرش‌های بزرگ را مدیریت می‌کنند؛ اما بین دو نقطهٔ شکست هم صفحه در همهٔ عرض‌ها باید خوب بایستد. این‌جا واحدهای سیال به کار می‌آیند. برای تصویرها یک قاعدهٔ کلاسیک بنویسید که هیچ‌گاه از ظرف خود بزرگ‌تر نشوند:

img {
  max-width: 100%;
  height: auto;
}

برای عرض ستون‌ها و فاصله‌ها از درصد و fr و rem استفاده کنید تا همه‌چیز با عرض صفحه مقیاس شود. برای اندازهٔ متن، تابع clamp بین یک حداقل و حداکثر، مقداری سیال می‌دهد:

h1 {
  /* minimum 1.5rem, usually 4vw, maximum 2.5rem */
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

واحد vw درصد عرض صفحه نمایش است؛ ۴vw یعنی چهار درصد عرض. تابع clamp این مقدار سیال را در محدودهٔ سالم نگه می‌دارد: نه آن‌قدر کوچک که ناخوانا شود، نه آن‌قدر بزرگ که صفحه را بشکند.

تست و ترکیب

برای دیدن نتیجه لازم نیست گوشی بخرید: در مرورگر با کلید F12، دکمهٔ حالت دستگاه (Device Toolbar) را فعال کنید و صفحه را در اندازه‌های مختلف ببینید. و به یاد داشته باشید که ابزارهای این دوره با هم کار می‌کنند: طرح معمول امروز، گرید برای قالب کلی صفحه و فلکس‌باکس برای ردیف‌های درون هر بخش است، با پرس‌وجوهایی که در نقطه‌های شکست قالب را دوباره می‌چینند:

.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 900px) {
  .page {
    grid-template-columns: 250px 1fr;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }
}

تمرین‌ها

/* Write your code here */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

img {
  max-width: 100%;
  height: auto;
}

h1 {
  font-size: clamp(1.25rem, 3.5vw, 2rem);
}

:::

خلاصه

• تگ viewport با width=device-width و initial-scale=1 شرط لازم هر صفحهٔ واکنش‌گراست.
• پرس‌وجوی رسانه‌ای با @media (min-width) استایل را به اندازه‌های مشخص محدود می‌کند.
• در رویکرد اول موبایل، استایل پایه برای صفحهٔ کوچک است و با min-width لایه‌های بزرگ اضافه می‌شوند.
• تصویرها با max-width: 100% و متن‌ها با clamp و واحدهای نسبی سیال می‌مانند.
• نقطهٔ شکست را جایی بگذارید که چیدمان واقعاً بشکند؛ گرید و فلکس‌باکس در کنار پرس‌وجوها همکارند.

با این درس، دورهٔ CSS کامل می‌شود: انتخاب، جعبه، رنگ و متن، فلکس‌باکس، گرید و واکنش‌گرایی. حالا می‌توانید اسکلت HTML خود را به صفحه‌ای کامل و همه‌جا دیده‌شده تبدیل کنید.