طراحی ریسپانسیو

طراحی ریسپانسیو یعنی چه؟

صفحهٔ وب روی موبایل، تبلت و دسکتاپ به‌خوبی نمایش داده شود و خوانایی و استفاده راحت باشد. برای این کار از ترکیب واحدهای نسبی، Media Query و گاهی تصاویر و فونت‌های انعطاف‌پذیر استفاده می‌کنیم.

واحدهای نسبی

% — نسبت به والد
rem — نسبت به اندازهٔ فونت root (معمولاً ۱۶px). برای فونت و فاصله توصیه می‌شود.
em — نسبت به فونت المان فعلی
vw / vh — درصد عرض و ارتفاع viewport

استفاده از max-width: 100% برای تصاویر جلوی بیرون زدن از ظرف را می‌گیرد.

Media Query

با Media Query استایل را بر اساس عرض صفحه (یا نوع دستگاه) اعمال می‌کنی. معمولاً به‌صورت «موبایل اول» اول استایل پایه را برای عرض کم می‌نویسی و بعد با min-width برای عرض بیشتر اضافه می‌کنی.

/* پایه: موبایل */
.container { padding: 1rem; }

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

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

Viewport

در <head> حتماً این متا تگ را داشته باش تا روی موبایل زوم نشود و عرض درست حساب شود:

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

جمع‌بندی: واحد نسبی (مثل rem)، عرض انعطاف‌پذیر، Media Query و viewport صحیح پایهٔ طراحی ریسپانسیو هستند.