🌐 درس ششم: طراحی واکنش‌گرا (Responsive)

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

سلام دوست عزیز! 👋

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

توی این درس، با هم یاد می‌گیریم:

✅ مفهوم طراحی واکنش‌گرا
✅ Media Queries و کاربرد آن
✅ واحدهای نسبی (em, rem, vh, vw)
✅ تمرین: صفحه سازگار با موبایل

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

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

💡 چرا طراحی واکنش‌گرا مهم است؟

✅ بیش از ۵۰٪ ترافیک وب از موبایل است
✅ گوگل به سایت‌های واکنش‌گرا امتیاز بیشتری می‌دهد
✅ تجربه کاربری بهتری برای بازدیدکنندگان فراهم می‌کند
✅ یک سایت برای همه دستگاه‌ها کافی است

📐 بخش ۲: واحدهای نسبی

برای طراحی واکنش‌گرا، به جای واحدهای ثابت مثل px از واحدهای نسبی استفاده می‌کنیم.

📊 واحدهای نسبی در CSS

واحد	توضیح	مثال
`%`	درصد از عنصر والد	`width: 50%`
`em`	نسبت به اندازه فونت والد	`font-size: 1.2em`
`rem`	نسبت به اندازه فونت ریشه	`font-size: 1.2rem`
`vh`	درصد از ارتفاع viewport	`height: 100vh`
`vw`	درصد از عرض viewport	`width: 100vw`

مثال: استفاده از واحدهای نسبی

🎨
واحدهای نسبی

CSS
v3


<style>
    html {
        font-size: 16px;  /* اندازه فونت پایه */
    }

    .container {
        width: 80%;  /* ۸۰ درصد عرض والد */
        max-width: 1200px;  /* حداکثر عرض */
        margin: 0 auto;
    }

    .box {
        font-size: 1.2rem;  /* ۱.۲ برابر اندازه فونت ریشه */
        padding: 2em;  /* ۲ برابر اندازه فونت خود عنصر */
        min-height: 50vh;  /* حداقل ۵۰ درصد ارتفاع صفحه */
    }
</style>

💡 تفاوت em و rem

em نسبت به اندازه فونت عنصر والد است، اما rem نسبت به اندازه فونت عنصر ریشه (html) است. rem برای طراحی واکنش‌گرا پیشنهاد می‌شود.

📱 بخش ۳: Media Queries

Media Queries به ما اجازه می‌دهند استایل‌های مختلفی را بر اساس اندازه صفحه نمایش اعمال کنیم.

ساختار کلی:

🎨
Media Query

CSS
v3


<style>
    /* استایل‌های پیش‌فرض (برای دسکتاپ) */
    .container {
        display: flex;
        gap: 30px;
    }

    /* وقتی عرض صفحه کمتر از ۷۶۸ پیکسل باشد */
    @media (max-width: 768px) {
        .container {
            flex-direction: column;  /* حالت عمودی */
            gap: 15px;
        }
    }

    /* وقتی عرض صفحه کمتر از ۴۸۰ پیکسل باشد */
    @media (max-width: 480px) {
        .container {
            padding: 10px;
        }
    }
</style>

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

🎨
واکنش‌گرا

CSS
v3


<style>
    .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);  /* دسکتاپ: ۴ ستون */
        gap: 20px;
    }

    .item {
        background: #2563EB;
        color: white;
        padding: 30px;
        border-radius: 8px;
        text-align: center;
    }

    /* تبلت: ۲ ستون */
    @media (max-width: 768px) {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* موبایل: ۱ ستون */
    @media (max-width: 480px) {
        .grid {
            grid-template-columns: 1fr;
        }

        .item {
            padding: 20px;
        }
    }
</style>

💡 نکته مهم:

همیشه از max-width برای طراحی موبایل-اول (Mobile-First) استفاده کنید. یعنی ابتدا استایل موبایل را بنویسید و سپس با min-width برای دستگاه‌های بزرگ‌تر تنظیم کنید.

📱 بخش ۴: پروژه عملی – صفحه سازگار با موبایل

📝 پروژه: صفحه سازگار با موبایل

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

🔍 راه‌حل پروژه:

🎨
صفحه واکنش‌گرا

CSS
v3


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه واکنش‌گرا</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Vazir", "Arial", sans-serif;
            background: #f8fafc;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            background: white;
            padding: 20px;
            border-radius: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 30px;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: #2563EB;
        }

        nav {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        nav a {
            color: #475569;
            text-decoration: none;
            padding: 8px 12px;
            border-radius: 6px;
            transition: background 0.3s;
        }

        nav a:hover {
            background: #f1f5f9;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .card {
            background: white;
            padding: 25px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            border: 1px solid #e2e8f0;
        }

        .card .icon {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .card h3 {
            color: #0f172a;
            margin-bottom: 8px;
        }

        .card p {
            color: #475569;
            font-size: 0.95rem;
        }

        footer {
            background: white;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            color: #475569;
            border: 1px solid #e2e8f0;
        }

        /* ============================================
           واکنش‌گرا: تبلت
           ============================================ */

        @media (max-width: 768px) {
            .grid {
                grid-template-columns: repeat(2, 1fr);
            }

            header {
                flex-direction: column;
                text-align: center;
            }

            nav {
                justify-content: center;
            }
        }

        /* ============================================
           واکنش‌گرا: موبایل
           ============================================ */

        @media (max-width: 480px) {
            .grid {
                grid-template-columns: 1fr;
            }

            nav {
                flex-direction: column;
                align-items: center;
            }

            nav a {
                width: 100%;
                text-align: center;
            }

            .logo {
                font-size: 1.5rem;
            }

            body {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">🚀 رجستری</div>
            <nav>
                <a href="#">خانه</a>
                <a href="#">دوره‌ها</a>
                <a href="#">وبلاگ</a>
                <a href="#">تماس</a>
            </nav>
        </header>

        <div class="grid">
            <div class="card">
                <div class="icon">🐍</div>
                <h3>پایتون</h3>
                <p>دوره جامع آموزش پایتون از مقدماتی تا پیشرفته</p>
            </div>

            <div class="card">
                <div class="icon">🌐</div>
                <h3>HTML & CSS</h3>
                <p>طراحی وب حرفه‌ای با HTML و CSS</p>
            </div>

            <div class="card">
                <div class="icon">⚛️</div>
                <h3>React</h3>
                <p>ساخت اپلیکیشن‌های تک صفحه‌ای با React</p>
            </div>
        </div>

        <footer>
            <p>© ۱۴۰۴ - تمامی حقوق محفوظ است. رجستری آکادمی</p>
        </footer>
    </div>
</body>
</html>

📝 تمرین‌های عملی

🎯 تمرین شماره ۱

یک صفحه با ۴ کارت طراحی کنید که در دسکتاپ ۴ ستون، در تبلت ۲ ستون و در موبایل ۱ ستون باشد.

🎯 تمرین شماره ۲

یک هدر با لوگو و منو طراحی کنید که در موبایل منو به‌صورت عمودی و زیر لوگو نمایش داده شود.

🧩 جمع‌بندی درس

تبریک می‌گم! 🎉 توی این درس یاد گرفتی:

✅ مفهوم طراحی واکنش‌گرا و اهمیت آن
✅ واحدهای نسبی (em, rem, vh, vw)
✅ استفاده از Media Queries برای دستگاه‌های مختلف
✅ طراحی یک صفحه کاملاً واکنش‌گرا

🎯 برای پروژه نهایی آماده‌اید؟

در درس بعدی، پروژه نهایی رو با هم می‌سازیم و همه چیزهایی که یاد گرفتی رو توی یک صفحه کامل جمع می‌کنیم.

🔗 لینک‌های مرتبط

⬅️
درس قبل: Grid

🚀
پروژه نهایی

🏠
صفحه دوره‌ها

👤

نویسنده یونس رجستری

📅

تاریخ انتشار 20 مرداد 1405

🔄

آخرین بروزرسانی 20 مرداد 1405

دنیای تکنولوژی
از یادگیری شروع می‌شود

طراحی واکنش‌گرا (Responsive)