DiCode دیکد
۶

طراحی واکنش‌گرا

طراحی وب برای همه دستگاه‌ها

فهرست مطالب

آنچه در این درس خواهید آموخت

مقدمه
Media Queries
Mobile First Design
چیدمان‌های انعطاف‌پذیر
تصاویر واکنش‌گرا
تایپوگرافی واکنش‌گرا
تمرین عملی

طراحی واکنش‌گرا

وب‌سایتی که روی همه دستگاه‌ها عالی کار کند!

تصور کنید لباسی که خودش را با اندازه شما تطبیق دهد! 👕 طراحی واکنش‌گرا (Responsive Design) همین کار را برای وب‌سایت‌ها انجام می‌دهد - صفحه شما روی موبایل، تبلت و دسکتاپ به بهترین شکل نمایش داده می‌شود.

با استفاده از Media Queries، Flexbox و Grid می‌توانیم طرح‌هایی بسازیم که خودشان را با اندازه صفحه تطبیق دهند!

چرا مهم است؟

امروزه بیش از ۵۰٪ کاربران از موبایل استفاده می‌کنند. طراحی واکنش‌گرا تجربه کاربری را بهبود می‌بخشد!

Media Queries - پایه طراحی واکنش‌گرا

Media Queries مثل قوانین شرطی هستند که به CSS می‌گویند در اندازه‌های مختلف صفحه چه کار کند! 📱💻

ساختار Media Query

CSS 
/* استایل پیش‌فرض برای دسکتاپ */
.container {
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* برای تبلت‌ها */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 15px;
    }
}

/* برای موبایل‌ها */
@media (max-width: 480px) {
    .container {
        padding: 10px;
        font-size: 14px;
    }
}

نقاط شکست رایج

📏 اندازه‌های استاندارد:

  • موبایل: تا 480px
  • تبلت: 481px تا 768px
  • دسکتاپ کوچک: 769px تا 1024px
  • دسکتاپ بزرگ: 1025px به بالا

نکته: همیشه از Mobile-First شروع کنید!

Flexbox - چیدمان انعطاف‌پذیر

Flexbox مثل یک جادوگر است که عناصر را به بهترین شکل ممکن چیدمان می‌کند! 🎩✨

مقاله وبلاگ 
/* کانتینر Flexbox */
.flex-container {
    display: flex;
    flex-direction: row; /* یا column */
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

/* آیتم‌های انعطاف‌پذیر */
.flex-item {
    flex: 1; /* رشد یکسان */
    padding: 20px;
    background: #f0f0f0;
    border-radius: 8px;
    text-align: center;
}

/* واکنش‌گرا کردن */
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
    }
}

ویژگی‌های مهم Flexbox:

  • • display: flex: فعال‌سازی Flexbox
  • • flex-direction: جهت چیدمان (row/column)
  • • justify-content: تراز افقی
  • • align-items: تراز عمودی

CSS Grid - شبکه‌بندی قدرتمند

Grid مثل یک جدول جادویی است که هر چیزی را در جای مناسبش قرار می‌دهد! 🎯

Grid پایه

CSS Grid 
/* کانتینر Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 20px;
    padding: 20px;
}

/* آیتم‌های Grid */
.grid-item {
    background: #e3f2fd;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

/* واکنش‌گرا */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

Grid پیشرفته

Grid Areas 
/* لایوت پیچیده */
.layout-grid {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 20px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* موبایل */
@media (max-width: 768px) {
    .layout-grid {
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
    }
}

Mobile First Design - طراحی موبایل اول

Mobile First یعنی ابتدا برای موبایل طراحی کنید، سپس برای صفحه‌های بزرگ‌تر! 📱➡️💻

Mobile First CSS 
/* پایه: موبایل (بدون Media Query) */
.container {
    width: 100%;
    padding: 10px;
}

.menu {
    display: none; /* منوی همبرگری */
}

.hamburger {
    display: block;
}

/* تبلت و بالاتر */
@media (min-width: 768px) {
    .container {
        padding: 20px;
    }
    
    .menu {
        display: flex;
    }
    
    .hamburger {
        display: none;
    }
}

/* دسکتاپ */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

مزایای Mobile First:

  • • عملکرد بهتر روی موبایل
  • • کد تمیزتر و ساده‌تر
  • • SEO بهتر
  • • تجربه کاربری بهینه

چیدمان‌های انعطاف‌پذیر

چیدمان‌هایی که خودشان را با اندازه صفحه تطبیق می‌دهند! 🔄

Flexbox Layout

Flexbox 
.flex-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.flex-item {
    flex: 1 1 300px; /* grow shrink basis */
    min-width: 0;
}

/* موبایل */
@media (max-width: 768px) {
    .flex-layout {
        flex-direction: column;
    }
}

Grid Layout

CSS Grid 
.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* موبایل */
@media (max-width: 768px) {
    .grid-layout {
        grid-template-columns: 1fr;
    }
}

تصاویر واکنش‌گرا

تصاویری که در همه اندازه‌ها عالی نمایش داده می‌شوند! 🖼️

Responsive Images 
/* تصاویر واکنش‌گرا */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* تصاویر پس‌زمینه */
.bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* تصاویر مختلف برای اندازه‌های مختلف */
.hero-image {
    background-image: url('hero-mobile.jpg');
}

@media (min-width: 768px) {
    .hero-image {
        background-image: url('hero-tablet.jpg');
    }
}

@media (min-width: 1024px) {
    .hero-image {
        background-image: url('hero-desktop.jpg');
    }
}

نکات مهم تصاویر واکنش‌گرا:

  • • همیشه max-width: 100% استفاده کنید
  • • height: auto برای حفظ نسبت
  • • از تصاویر مختلف برای اندازه‌های مختلف استفاده کنید
  • • فرمت WebP برای بهینه‌سازی

تایپوگرافی واکنش‌گرا

متن‌هایی که در همه اندازه‌ها خوانا و زیبا هستند! ✍️

Responsive Typography 
/* تایپوگرافی واکنش‌گرا */
html {
    font-size: 14px; /* پایه موبایل */
}

h1 {
    font-size: 1.8rem;
    line-height: 1.2;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.3;
}

p {
    font-size: 1rem;
    line-height: 1.6;
}

/* تبلت */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
    
    h1 {
        font-size: 2.2rem;
    }
}

/* دسکتاپ */
@media (min-width: 1024px) {
    html {
        font-size: 18px;
    }
    
    h1 {
        font-size: 2.5rem;
    }
}

/* استفاده از clamp() برای اندازه انعطاف‌پذیر */
.fluid-text {
    font-size: clamp(1rem, 2.5vw, 2rem);
}

نکات تایپوگرافی واکنش‌گرا:

  • • از rem به جای px استفاده کنید
  • • line-height مناسب برای خوانایی
  • • clamp() برای اندازه‌های انعطاف‌پذیر
  • • تست روی دستگاه‌های مختلف

مقایسه: طراحی واکنش‌گرا در مقابل ثابت

بیایید ببینیم تفاوت طراحی واکنش‌گرا با طراحی ثابت چیست! 📱💻

❌ طراحی ثابت

غیرواکنش‌گرا 
/* طراحی ثابت - مشکل‌ساز! */
.container {
    width: 1200px; /* عرض ثابت */
    margin: 0 auto;
}

.sidebar {
    width: 300px;
    float: left;
}

.main {
    width: 900px;
    float: right;
}

.menu {
    display: inline-block;
    width: 150px;
}

/* هیچ Media Query نداریم! */

✅ طراحی واکنش‌گرا

واکنش‌گرا 
/* طراحی واکنش‌گرا - عالی! */
.container {
    max-width: 1200px;
    width: 100%; /* انعطاف‌پذیر */
    margin: 0 auto;
    padding: 0 20px;
}

.layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

/* تبلت */
@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }
    .container {
        padding: 0 15px;
    }
}

/* موبایل */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
}

مزایای طراحی واکنش‌گرا:

  • • در همه دستگاه‌ها عالی نمایش داده می‌شود
  • • تجربه کاربری بهتری ارائه می‌دهد
  • • SEO موبایل بهتری دارید
  • • نگهداری آسان‌تر است

تمرین عملی

حالا وقت ساختن یک لایوت کاملاً واکنش‌گرا است!

📝 تمرین:

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

  • • هدر ثابت با منوی همبرگری در موبایل
  • • لایوت سه ستونه در دسکتاپ
  • • تک ستونه در موبایل
  • • استفاده از Flexbox یا Grid
  • • تصاویر واکنش‌گرا
  • • حداقل ۳ نقطه شکست (breakpoint)

جواب تمرین

این یکی از راه‌های حل این تمرین است:

responsive.css 
/* طراحی واکنش‌گرا کامل */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Vazirmatn', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* کانتینر اصلی */
.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

/* هدر ثابت */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

/* منوی ناوبری */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #007cba;
}

/* منوی همبرگری */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transition: 0.3s;
}

/* لایوت اصلی */
main {
    margin-top: 80px;
    padding: 2rem 0;
}

.layout {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    min-height: 80vh;
}

.content, .sidebar, .aside {
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* تصاویر واکنش‌گرا */
img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* نقاط شکست */
/* تبلت */
@media (max-width: 1024px) {
    .layout {
        grid-template-columns: 2fr 1fr;
    }
    .aside {
        grid-column: 1 / -1;
    }
}

/* تبلت کوچک */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        padding: 1rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .hamburger {
        display: flex;
    }
    
    .layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* موبایل */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
    
    .content, .sidebar, .aside {
        padding: 1.5rem;
    }
    
    .header-content {
        padding: 0.8rem 0;
    }
}
<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>سایت واکنش‌گرا</title> <link rel="stylesheet" href="responsive.css"> </head> <body> <header> <div class="container"> <div class="header-content"> <h1>سایت واکنش‌گرا</h1> <nav> <ul class="nav-menu"> <li><a href="#">خانه</a></li> <li><a href="#">درباره ما</a></li> <li><a href="#">خدمات</a></li> <li><a href="#">تماس</a></li> </ul> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </nav> </div> </div> </header> <main> <div class="container"> <div class="layout"> <section class="content"> <h2>محتوای اصلی</h2> <p>این یک مثال از طراحی واکنش‌گرا است که در تمام دستگاه‌ها به خوبی نمایش داده می‌شود.</p> <img src="https://via.placeholder.com/600x300" alt="تصویر نمونه"> </section> <aside class="sidebar"> <h3>نوار کناری</h3> <ul> <li>مطلب اول</li> <li>مطلب دوم</li> <li>مطلب سوم</li> </ul> </aside> <aside class="aside"> <h3>اطلاعات اضافی</h3> <p>این بخش حاوی اطلاعات تکمیلی است.</p> </aside> </div> </div> </main> <footer> <div class="container"> <p>© ۱۴۰۳ سایت واکنش‌گرا. تمامی حقوق محفوظ است.</p> </div> </footer> </body> </html>

تبریک! شما طراحی واکنش‌گرا را یاد گرفتید! 🎉

چیزهایی که یاد گرفتید:

  • • Media Queries
  • • Flexbox Layout
  • • CSS Grid
  • • نقاط شکست
  • • تصاویر واکنش‌گرا
  • • طراحی موبایل اول

مرحله بعدی:

  • • CSS پیشرفته
  • • انیمیشن و ترانزیشن
  • • JavaScript تعاملی
  • • پروژه‌های واقعی

💡 نکته: حالا که طراحی واکنش‌گرا را یاد گرفتید، می‌توانید وب‌سایت‌هایی بسازید که در همه دستگاه‌ها عالی کار کنند!

درس قبلی: فرم‌ها
درس ۶ از ۶
درس بعدی: CSS پیشرفته