Responsive Web Design – Templates – سایت اموزشی زرین لرن

طراحی وب واکنش‌گرا چیست؟

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

اصول کلیدی طراحی واکنش‌گرا

شبکه‌های سیال (Fluid grids): استفاده از واحدهای نسبی مثل درصد (%) یا em به جای پیکسل ثابت.
تصاویر قابل انعطاف: تصاویر درون کادر خود متناسب با اندازه تغییر می‌کنند.
مدیا کوئری‌ها (Media queries): قوانین CSS که بر اساس اندازه صفحه یا نوع دستگاه اعمال می‌شوند.
رویکرد موبایل-اول (Mobile-first): ابتدا برای صفحه‌های کوچک طراحی کنید، سپس برای صفحه‌های بزرگ‌تر تنظیم کنید.

نمونه قالب ساده واکنش‌گرا (HTML + CSS)

<!DOCTYPE html>
<html lang=“fa”>
<head>
<meta charset=“UTF-8” />
<meta name=“viewport” content=“width=device-width, initial-scale=1” />
<title>قالب طراحی واکنش‌گرا</title>
<style>
/* استایل پایه */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
direction: rtl; /* راست به چپ */
}

header, footer {
background-color: #333;
color: white;
padding: 1em;
text-align: center;
}

nav {
background: #555;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

nav a {
color: white;
padding: 1em;
text-decoration: none;
flex: 1 1 100px;
text-align: center;
}

main {
padding: 1em;
display: flex;
flex-wrap: wrap;
gap: 1em;
justify-content: center;
}

article {
background: #f4f4f4;
padding: 1em;
flex: 1 1 300px;
box-sizing: border-box;
border-radius: 5px;
}

/* مدیا کوئری واکنش‌گرا */
@media (max-width: 768px) {
nav {
flex-direction: column;
}
}
</style>
</head>
<body>

<header>
<h1>سایت واکنش‌گرای من</h1>
</header>

<nav>
<a href=“#”>خانه</a>
<a href=“#”>درباره</a>
<a href=“#”>خدمات</a>
<a href=“#”>تماس</a>
</nav>

<main>
<article>
<h2>مقاله ۱</h2>
<p>این یک بخش مقاله انعطاف‌پذیر است.</p>
</article>
<article>
<h2>مقاله ۲</h2>
<p>پنجره را تغییر اندازه دهید تا اثر واکنش‌گرایی را ببینید.</p>
</article>
<article>
<h2>مقاله ۳</h2>
<p>محتوا بر اساس اندازه صفحه تنظیم می‌شود.</p>
</article>
</main>