پرسش‌های رسانه‌ای (Media Queries)

آشنایی کامل با Media Queries برای طراحی واکنش‌گرا: breakpoints و شرایط مختلف

Media Query چیست؟

Media Query اجازه می‌دهد CSS را برای شرایط خاص (مثل عرض صفحه) تغییر دهید. این قلب طراحی واکنش‌گرا است.

ساختار پایه

@media (max-width: 768px) {
        body {
            font-size: 14px;
        }
    }

شرایط رایج

شرطتوضیح
max-widthحداکثر عرض
min-widthحداقل عرض
orientationجهت (portrait/landscape)
prefers-color-schemeتم تاریک/روشن
prefers-reduced-motionکاهش انیمیشن

Breakpoints استاندارد

نامعرضدستگاه
Mobile320-480pxموبایل
Tablet768pxتبلت
Laptop1024pxلپ‌تاپ
Desktop1200pxدسکتاپ
TV1920px+تلویزیون

روش Mobile-First ⭐

/* موبایل اول — پیش‌فرض */
    body { font-size: 14px; }
    
    /* تبلت به بالا */
    @media (min-width: 768px) {
        body { font-size: 16px; }
    }
    
    /* دسکتاپ به بالا */
    @media (min-width: 1024px) {
        body { font-size: 18px; }
    }

ترکیب شرایط

/* بین 768px و 1024px */
    @media (min-width: 768px) and (max-width: 1024px) {
        .sidebar { width: 200px; }
    }

تم تاریک با Media Query

@media (prefers-color-scheme: dark) {
        body {
            background: #1a1a2e;
            color: #ecf0f1;
        }
    }

چاپ

@media print {
        .no-print { display: none; }
        body { color: black; background: white; }
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط