responsive یعنی چه — ترم ۴ آیرو

در این فصل چه می‌سازی#

آخر این فصل یک صفحهٔ ساده داری که روی هر عرضی خوب کار می‌کند — روی موبایلِ باریک، روی تبلت، روی صفحهٔ پهنِ کامپیوتر. یک صفحه که با اندازهٔ نمایش خودش را جور می‌کند و کاربر را مجبور نمی‌کند برای دیدن محتوا به چپ و راست بلغزد. به این خاصیت می‌گویند responsive؛ یعنی صفحه به اندازهٔ صفحه‌نمایش پاسخ می‌دهد.

مقایسهٔ یک صفحه روی سه اندازهٔ نمایش: موبایلِ باریک با یک ستون، تبلتِ متوسط، و صفحهٔ پهن — محتوا در هر سه خوانا و بی‌سرریز است

آخر این فصل می‌توانی:

بگویی responsive یعنی چه و چرا برای هر سایتِ امروزی لازم است
<meta name="viewport"> را در <head> بگذاری و بگویی چه کار می‌کند
فرق عرضِ ثابت و عرضِ نسبی را تشخیص بدهی و درست را انتخاب کنی
بگویی mobile-first چیست و چرا از صفحهٔ کوچک شروع می‌کنیم

قبل از شروع#

از ترم ۲: max-width، margin: 0 auto و واحد % — ابزارِ اصلیِ عرضِ نسبی همین‌هایند.
از ترم ۲: box-sizing: border-box — تا padding عرض را نترکاند.
از ترم ۱: ساختار <head> و tag یی مثل <meta charset> — meta viewport هم یک <meta> است.

مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.

۱. responsive یعنی چه#

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

این مهم است چون تو نمی‌دانی کاربر با چه چیزی صفحه‌ات را باز می‌کند: یک موبایلِ باریک، یک تبلت، یک لپ‌تاپ، یا یک نمایشگرِ خیلی پهن. یک صفحهٔ خوب باید روی همه‌شان خوانا و مرتب باشد، بدونِ اینکه برای هر کدام یک نسخهٔ جدا بسازی.

responsive یعنی یک صفحه که به‌جای یک اندازهٔ ثابت، خودش را با عرضِ نمایش جور می‌کند. همان محتوا، همان کد — ولی روی موبایل یک‌ستونه و جمع‌وجور، روی دسکتاپ پهن و چندستونه. کلیدِ این کار این است که به مرورگر عددِ ثابت ندهیم، بلکه قاعده بدهیم؛ و اولین قاعده یک خطِ کوچک در <head> است.

۲. اولین قدم: meta viewport#

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

برای اینکه بگوییم «نه، از عرضِ واقعیِ همین دستگاه استفاده کن»، یک خط در <head> می‌گذاریم:

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

width=device-width یعنی «عرضِ صفحه را برابرِ عرضِ واقعیِ دستگاه بگیر، نه آن ۹۸۰ خیالی». و initial-scale=1 یعنی «اول کار زوم نکن؛ با مقیاس ۱ شروع کن». این یک خط، پایهٔ هر چیزِ responsive است — بدونش، هر قاعدهٔ دیگری که در ترم بنویسی روی موبایل درست نمی‌نشیند، چون مرورگر فکر می‌کند صفحه ۹۸۰ پیکسل پهن است.

💡 نکته: این خط را همیشه در هر صفحهٔ جدید بگذار — همان‌قدر عادی که <meta charset="UTF-8"> می‌گذاری. اثرش را روی یک موبایلِ واقعی از همه بهتر می‌بینی: بدونش صفحه ریز و زوم‌اوت است، با آن، اندازهٔ درست.

قبل از ادامه، جواب بده: اگر meta viewport را نگذاری، موبایل فکر می‌کند صفحه چند پیکسل پهن است؟ (حدودِ ۹۸۰ — و همین باعث می‌شود همه‌چیز ریز و زوم‌اوت دیده شود.)

۳. تلهٔ عرضِ ثابت#

حالا برویم سراغِ محتوا. یک کارتِ ساده می‌سازیم. طبیعی به‌نظر می‌رسد که عرضش را با یک عددِ ثابت تعیین کنیم — مثلاً «کارت ۹۰۰ پیکسل پهن باشد». در آزمایشگاه این را امتحان کن:

.card {
  width: 900px;
  background-color: #ffffff;
  padding: 24px;
}

روی یک صفحهٔ پهن قشنگ به‌نظر می‌رسد. حالا عرضِ پیش‌نمایش را باریک کن — مثل یک موبایل. کارت باریک نمی‌شود! سرِ جایش ۹۰۰ پیکسل می‌ماند، از لبهٔ صفحه بیرون می‌زند، و پایینِ پیش‌نمایش یک نوارِ لغزشِ افقی ظاهر می‌شود. کاربر باید به چپ و راست بکشد تا بقیهٔ کارت را ببیند.

🔧 اگر کار نکرد: بله، همین سرریز و نوارِ لغزشِ افقی همان چیزی است که باید ببینی — و دقیقاً همان مشکلی است که می‌خواهیم حلش کنیم. علتش کلمهٔ width است: width: 900px یعنی «دقیقاً ۹۰۰ پیکسل، نه یک پیکسل کمتر»، حتی اگر صفحه از ۹۰۰ باریک‌تر باشد. عددِ ثابت با عرضِ صفحه بالا و پایین نمی‌رود. راهِ درست را در بخش بعد می‌سازیم.

۴. عرضِ نسبی: `max-width` به‌جای `width`#

راهِ حل یک تغییرِ کوچک است ولی طرزِ فکر را عوض می‌کند: به‌جای اینکه یک عددِ ثابت بدهی، یک سقف بده. max-width: 600px یعنی «تا ۶۰۰ پیکسل پهن شو، ولی اگر جا کمتر بود، خودت را جمع کن». روی صفحهٔ پهن کارت به ۶۰۰ می‌رسد و می‌ایستد؛ روی موبایلِ باریک، هر چقدر جا هست را می‌گیرد و دیگر بیرون نمی‌زند. عرضِ ثابت را با سقف عوض کن و کارت را وسط بیاور:

.card {
  max-width: 600px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 24px;
  border-radius: 8px;
}

✅ چک کن: حالا عرضِ پیش‌نمایش را از خیلی پهن تا خیلی باریک تغییر بده. روی پهنا، کارت ۶۰۰ پیکسل می‌ماند و با margin: 0 auto وسط می‌نشیند؛ روی باریک، کارت با صفحه جمع می‌شود و هیچ نوارِ لغزشِ افقی‌ای پیدا نمی‌شود. همین است تفاوتِ عرضِ نسبی با عرضِ ثابت — یکی قاعده می‌دهد، دیگری عددِ خشک.

مقایسهٔ دو موبایل: سمت راست کارتی با عرضِ ثابت که از لبهٔ صفحه بیرون زده و نوارِ لغزشِ افقی دارد، سمت چپ همان کارت با عرضِ نسبی که تمیز داخلِ صفحه جا شده

این طرزِ فکر کلِ ترم است: هر جا وسوسه شدی یک عرضِ ثابتِ بزرگ با px بدهی، به‌جایش از max-width، % یا واحدهای نسبی استفاده کن تا صفحه بتواند نفس بکشد. عددِ ثابتِ px برای چیزهای کوچک و همیشگی خوب است (مثل border-radius یا padding)، نه برای عرضِ کلِ یک ناحیه.

⚠️ مواظب باش: width و max-width را با هم قاطی نکن. اگر هم width: 900px بنویسی و هم max-width: 600px، آن max-width برنده می‌شود و کارت هیچ‌وقت از ۶۰۰ رد نمی‌شود — که گیج‌کننده است. برای یک ناحیهٔ منعطف، فقط max-width بنویس و بگذار محتوا و صفحه بقیه‌اش را تعیین کنند.

۵. mobile-first: از کوچک شروع کن#

یک عادتِ فکری که کلِ این ترم رویش سوار است: mobile-first، یعنی «اول موبایل». به‌جای اینکه صفحه را برای دسکتاپ بسازی و بعد سعی کنی برای موبایل جمعش کنی، برعکس کن — اول ساده‌ترین و باریک‌ترین حالت (یک ستون، همه‌چیز زیرِ هم) را درست کن، بعد برای صفحه‌های پهن‌تر امکاناتِ بیشتر اضافه کن.

چرا این‌طوری بهتر است؟ چون حالتِ یک‌ستونهٔ موبایل ساده‌ترین حالت است و کمترین چیز می‌تواند در آن خراب شود؛ از یک پایهٔ ساده به یک چیدمانِ پیچیده‌تر رفتن، آسان‌تر از این است که یک چیدمانِ شلوغِ دسکتاپ را به زور در موبایل بچپانی. یک دلیلِ عملی هم هست: بیشترِ کاربرانِ وب امروز با موبایل می‌آیند، پس منطقی است که حالتِ موبایل حالتِ اصلی باشد، نه فکرِ بعدی. کارتِ همین فصل دقیقاً mobile-first است: به‌طور پیش‌فرض با هر عرضی جمع می‌شود، و فقط یک سقفِ max-width دارد که روی صفحه‌های پهن جلوی زیادی-پهن‌شدنش را می‌گیرد.

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

🤖 با AI: از دستیار AI ات بپرس «فرقِ width و max-width برای یک طرحِ responsive چیست و چرا mobile-first بهتر است؟». جوابش را همان‌جا در آزمایشگاه امتحان کن: یک بار با width: 900px و یک بار با max-width: 600px، عرضِ پیش‌نمایش را باریک کن و با چشمت ببین کدام بیرون می‌زند. یادت باشد: AI هم اشتباه می‌کند — چیزی را که می‌گوید با چیزی که می‌بینی بسنج.

کد کاملِ این فصل#

این هم دو فایلِ کامل، یک‌جا. اول index.html — دقت کن که meta viewport سرِ جایش در <head> است:

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>صفحهٔ من</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main class="card">
      <h1>سلام!</h1>
      <p>این صفحه روی موبایل و دسکتاپ، هر دو، درست دیده می‌شود.</p>
      <p>رازش دو چیز است: meta viewport و عرض نسبی به‌جای عرض ثابت.</p>
    </main>
  </body>
</html>

و styles.css:

/* styles.css */
* {
  box-sizing: border-box;
}

body {
  background-color: #f6edda;
  margin: 0;
  padding: 16px;
}

.card {
  max-width: 600px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 24px;
  border-radius: 8px;
}

✅ چک کن: روی صفحه یک کارتِ سفیدِ وسط‌چین روی زمینهٔ کِرِم می‌بینی. عرضِ پیش‌نمایش را کم و زیاد کن: کارت تا ۶۰۰ پیکسل بزرگ می‌شود و می‌ایستد، و روی باریک بی‌هیچ سرریزی جمع می‌شود. این کوچک‌ترین صفحهٔ واقعاً responsive است.

واژه‌های تازهٔ این فصل#

کلمه	تلفظ به حروف فارسی	یعنی چه
responsive	ریسپانسیو	صفحه‌ای که خودش را با عرضِ نمایش جور می‌کند
viewport	ویوپورت	ناحیهٔ قابل‌دیدِ صفحه در مرورگر؛ همان چیزی که meta viewport تنظیمش می‌کند
`width=device-width`	ویدث دیوایس-ویدث	«عرض را برابرِ عرضِ واقعیِ دستگاه بگیر»
`max-width`	مکس-ویدث	سقفِ عرض؛ تا این حد پهن شو، ولی اگر جا کم بود جمع شو
mobile-first	موبایل-فرست	اول برای صفحهٔ کوچک بساز، بعد برای پهن اضافه کن

تمرین‌ها

اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.

در فصل بعد#

الان می‌توانی یک صفحه بسازی که با عرضِ نمایش جمع و باز می‌شود. ولی گاهی جمع‌شدنِ ساده کافی نیست — می‌خواهی روی موبایل یک ستون داشته باشی و روی دسکتاپ سه ستون، یعنی چیدمان را عوض کنی نه فقط اندازه را. فصل بعد سراغِ @media می‌رویم: قاعده‌ای که می‌گوید «این استایل‌ها فقط وقتی اجرا شوند که عرضِ صفحه از فلان مقدار بیشتر (یا کمتر) باشد» — همان چیزی که یک صفحه را واقعاً از موبایل تا دسکتاپ متحول می‌کند.

به آخر این فصل رسیدی!

اگر ساختی و جواب داد، این دکمه مال توست.