طراحی ریسپانسیو با CSS
درس‌های Flex و Grid واکنش‌گرا فقط ترفند چیدمان در breakpoint را نشان دادند. طراحی ریسپانسیو تصویر بزرگ‌تر است: یک سایت که روی موبایل، تبلت و مانیتور عریض خوانا بماند — بدون نگه‌داشتن دو نسخهٔ HTML. این جلسه پایه را می‌چیند؛ مدیا کوئری، breakpoint و تصویر واکنش‌گرا در درس‌های بعدی عمیق‌تر می‌شوند.
جعبهٔ ابزار طراحی ریسپانسیو
📊 طراحی ریسپانسیو یک‌نگاه
| قطعه | کار روزمره |
|---|---|
| Viewport meta | به مرورگر موبایل می‌گوید عرض دستگاه را بگیرد، نه ستون دسکتاپ جعلی |
| کانتینر سیال | width: 100% + max-width + padding کناری — طول خط خوانا |
واحدهای نسبی (rem، %، em) |
تایپ و فاصله‌گذاری که با تنظیمات و زمینه scale می‌شود |
| تصویر انعطاف‌پذیر | max-width: 100% تا رسانه از صفحهٔ باریک بیرون نزند |
| یک درخت HTML | همان landmark و لینک؛ CSS جابه‌جایی چیدمان را می‌برد |
| Media query (درس بعد) | وقتی viewport شرط را دارد قوانین را عوض کنید |
صفحهٔ با عرض ثابت که روی گوشی zoom می‌شود یا افقی اسکرول می‌خورد، کاربر را خسته می‌کند. طراحی ریسپانسیو هر عرضی را می‌پذیرد و فاصله، ستون و تایپ را آرام تنظیم می‌کند — و وقتی لازم شد از همان الگوهای Flex و Grid که تمرین کردید استفاده می‌کند.
Viewport meta — مرورگر موبایل به راهنما نیاز دارد
بدون <meta name="viewport" content="width=device-width, initial-scale=1"> خیلی از گوشی‌ها بوم به‌عرض دسکتاپ می‌سازند و کوچکش می‌کنند. یک‌بار در <head> HTML بگذارید، بعد با CSS استایل دهید.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
Mobile-first در برابر desktop-first
Mobile-first اول استایل پایه را برای صفحهٔ باریک می‌نویسد، بعد با media query از نوع min-width روی عرض بیشتر غنی می‌کند. Desktop-first از عریض شروع می‌کند و با max-width سفت می‌کند — مثل درس‌های Flex و Grid واکنش‌گرا. هر دو درست‌اند اگر یک لایه در هر مرحله عوض شود؛ برای هر پروژه یک عادت انتخاب کنید و ثابت بمانید.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
font-size: 1rem;
padding: 1rem;
}
/* درس Media Queries اینجا قوانین min-width اضافه می‌کند */
کانتینر سیال وسط‌چین
عرض کامل را با سقف max-width و padding افقی جفت کنید تا محتوا به لبهٔ صفحه نچسبد. این الگو قبل از انتخاب Flex یا Grid برای ستون‌ها جواب می‌دهد.
.page-wrap {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
واحد نسبی برای تایپ و فاصله
rem اندازه را به فونت ریشه وصل می‌کند — برای heading و gap مناسب است. % عرض داخل والد را پر می‌کند. همه‌چیز را px سخت نکنید؛ scale نسبی با zoom و تنظیمات دستگاه آرام‌تر می‌ماند.
:root {
font-size: 100%;
}
h1 {
font-size: 1.75rem;
margin: 0 0 0.75rem;
}
.lead {
font-size: 1.125rem;
max-width: 40rem;
}
تصویر و ویدیوی انعطاف‌پذیر
عکسی که از viewport عریض‌تر باشد اسکرول افقی می‌آورد. قانون ساده: display: block و max-width: 100% با height: auto تا نسبت تصویر حفظ شود.
img,
video {
display: block;
max-width: 100%;
height: auto;
}
عادت آرام برای ریسپانسیو
یک درخت HTML. viewport meta سر جایش. اول کانتینر سیال و واحد نسبی. وقتی ستون باید عوض شود سراغ الگوهای Flex و Grid واکنش‌گرا بروید — نه سایت دوم فقط برای موبایل. نقشهٔ breakpoint را بنویسید؛ درس Media Queries syntax را اسم می‌برد.
خودتان امتحان کنید
- روی یک صفحهٔ نمونه viewport meta را چک کنید.
- محتوا را داخل کانتینر سیال با
max-widthو padding کناری بپیچید. - متن body را با
remبگذارید و zoom مرورگر را امتحان کنید. - قانون تصویر انعطاف‌پذیر را روی یک گالری بگذارید.
- یک چیدمان بنویسید که هنوز به media query نیاز دارد — برای درس بعد نگه دارید.
اشتباهات رایج
- عرض px ثابت روی همهٔ wrapperها — روی صفحهٔ کوچک جایی برای نفس نیست
- سایت جدا مثل m.example.com به‌جای CSS ریسپانسیو روی یک درخت
- فراموش کردن viewport meta و تعجب از «zoom out» بودن موبایل
- تصویر بزرگ بدون
max-width: 100%— اسکرول افقی - فرض کردن این مقدمه جای درس‌های Media Queries، breakpoint و تصویر واکنش‌گرا را می‌گیرد
جمع‌بندی
- طراحی ریسپانسیو یک HTML را روی اندازه‌های مختلف viewport تطبیق می‌دهد
- viewport meta + کانتینر سیال + واحد نسبی پایهٔ کار است
- mobile-first و desktop-first نقطهٔ شروع‌اند؛ media query جابه‌جایی را اعمال می‌کند
- درس‌های Flex و Grid واکنش‌گرا ابزار داخل همین ذهنیت‌اند
- بعدی: Media Queries — syntax و عادت breakpoint آرام
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود