فصل ۳۴ | چندرسانه‌ای و تکمیلی

یک صفحه که با هر اندازه‌ی صفحه‌نمایش سازگار است

طراحی واکنش‌گرا (Responsive Design) به این معناست که یک صفحه‌ی وب، ظاهر و چیدمان خودش را بر اساس اندازه‌ی صفحه‌نمایش دستگاه کاربر (موبایل، تبلت یا دسکتاپ) تنظیم کند. این کار بیشتر با CSS انجام می‌شود، اما نقطه‌ی شروع آن یک تگ ساده در HTML است.

تگ viewport؛ نقطه‌ی شروع همه‌چیز

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

viewport.html
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

این تگ به مرورگر می‌گوید که عرض صفحه را برابر با عرض واقعی دستگاه در نظر بگیرد و بزرگ‌نمایی اولیه را روی مقدار ۱ (بدون زوم) تنظیم کند.

واحدهای اندازه‌ی نسبی

استفاده از واحدهای نسبی مثل درصد (٪) به‌جای پیکسل ثابت، به عناصر اجازه می‌دهد بر اساس عرض والد خود بزرگ یا کوچک شوند.

responsive-image.html
<img src="photo.jpg" style="max-width:100%; height:auto;" alt="عکس واکنش‌گرا">

Media Query در CSS

با کوئری‌های رسانه‌ای در CSS، می‌توان استایل‌های متفاوتی برای بازه‌های مختلف عرض صفحه تعریف کرد؛ همان چیزی که در پس‌زمینه‌ی بسیاری از سایت‌های واکنش‌گرا قرار دارد.

media-query.css
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}
نکته: طراحی واکنش‌گرا فقط درباره‌ی موبایل نیست؛ هدف اصلی آن اطمینان از خوانا و قابل‌استفاده بودن صفحه روی هر اندازه‌ی صفحه‌نمایشی است که وجود دارد یا در آینده ممکن است ساخته شود.