واکنش گرا (RWD Intro)
«طراحی واکنش گرا (Responsive Web Design)» یعنی سایت روی همه دستگاه ها خوب دیده شود. «نمایگاه (Viewport)» یعنی همان پنجره نمایش صفحه. با HTML و CSS اندازه ها خودکار می شوند. پس متن، ستون ها و منوها، روی موبایل و دسکتاپ راحت می شوند.
معرفی سریع RWD
در RWD، چیدمان با اندازه صفحه هماهنگ می شود. روی موبایل فشرده می شود. روی دسکتاپ گسترش می یابد. بنابراین کاربر همیشه تجربه راحت دارد.
اجزای کلیدی در RWD
- تگ meta viewport برای مقیاس درست صفحه.
- چیدمان انعطاف پذیر با Grid و Flex.
- مدیاکوئری ها برای نقطه های شکست.
نمونه کامل نقطه های شکست
با مدیاکوئری، چیدمان از یک ستون به چند ستون تغییر می کند.
<!-- HTML -->
<div class="container">
<nav class="nav">منو</nav>
<aside class="sidebar">سایدبار</aside>
<main class="content">محتوا</main>
<footer class="footer">فوتر</footer>
</div>
<!-- CSS -->
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.container > * {
grid-column: 1 / span 12;
}
@media (min-width: 576px) {
.sidebar {
grid-column: 1 / span 3;
}
.content,
.footer {
grid-column: 4 / span 9;
}
}
@media (min-width: 768px) {
.nav {
grid-column: 1 / span 2;
}
.content {
grid-column: 3 / span 8;
}
.sidebar {
grid-column: 11 / span 2;
}
.footer {
grid-column: 1 / span 12;
}
}
گام های عملی شروع RWD
- اول ساختار ساده HTML را بساز.
- چیدمان پایه را با Grid یا Flex بده.
- مدیاکوئری ها را برای عرض های مهم بنویس.
- متن و فاصله ها را قابل خواندن کن.
- روی موبایل و دسکتاپ تست نهایی بگیر.
نکته: همیشه دسترسی را چک کن. اندازه فونت و کنتراست مهم اند.
جمع بندی سریع
- RWD یعنی هماهنگی با اندازه صفحه.
- Viewport، Grid/Flex و مدیاکوئری ها کلیدی اند.
- از یک ستون شروع کن، بعد گسترده کن.
- روی چند دستگاه تست کن.
برای ادامه طراحی واکنش گرا به بخش نمایگاه و همچنین چیدمان 12 ستونه سر بزن.