مدیا کوئری در CSS
درس طراحی ریسپانسیو ذهنیت را گذاشت: یک درخت HTML، viewport، پوستهٔ سیال، واحد نسبی. مدیا کوئری همان سوئیچ است — تکه‌هایی از CSS که فقط وقتی شرط برقرار باشد روشن می‌شوند (معمولاً عرض viewport). این جلسه نحو و عادت آرام را یاد می‌دهد؛ تصویر واکنش‌گرا و نقاط شکست در درس‌های بعدی عمیق‌تر می‌شوند.
جعبهٔ ابزار مدیا کوئری
📊 مدیا کوئری یک‌نگاه
| قطعه | کار روزمره |
|---|---|
@media |
یک بلوک شرطی CSS را باز می‌کند |
ویژگی رسانه (min-width، max-width، …) |
آزمونی که مرورگر ارزیابی می‌کند |
and |
همهٔ ویژگی‌های فهرست‌شده باید برقرار باشند |
| کوئری‌های جدا با ویرگول | منطق یا — هر کدام که جور باشد کافی است |
قوانین داخل { } |
استایل‌هایی که فقط تا وقتی شرط برقرار است اعمال می‌شوند |
نوع رسانه (screen، print) |
فیلتر اختیاری برای بستر خروجی |
بدون کوئری، هر قانون «همیشه روشن» است. با کوئری، پایهٔ محکم درس قبل را نگه می‌دارید و تغییرها را لایه به لایه اضافه می‌کنید — ستون عریض‌تر، تایپ بزرگ‌تر، ناوبری متفاوت — فقط وقتی viewport جا داشته باشد.
کالبدشکافی @media
الگوی کلاسیک: ویژگی داخل پرانتز، بعد یک بلوک آکولاد با declarationهای معمولی. برای عرض تا می‌توانید rem یا em بگذارید — با تنظیمات ریشه/فونت بهتر scale می‌شود تا فهرست پیکسلِ هر گوشی.
.nav {
display: block;
}
@media (min-width: 48rem) {
.nav {
display: flex;
gap: 1rem;
}
}
Mobile-first با min-width
چیدمان باریک را در استایل پایه بنویسید. با @media (min-width: …) وقتی صفحه عریض‌تر شد غنی‌سازی اضافه کنید. هر پله یک لایهٔ مشخص را عوض کند — فاصله، ستون، یا ناوبری — نه اینکه کل صفحه را در هر پله از نو بنویسید.
.hero {
padding: 1rem;
font-size: 1.125rem;
}
@media (min-width: 40rem) {
.hero {
padding: 2rem;
font-size: 1.25rem;
}
}
@media (min-width: 64rem) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
Desktop-first با max-width
اگر پایه عریض است، @media (max-width: …) زیر یک آستانه استایل را سفت می‌کند — ستون‌ها روی هم، padding کمتر، نوارها ساده‌تر. داخل یک پروژه ثابت بمانید: بدون دلیل بین پشتهٔ خالص min-width و خالص max-width جاخالی نکنید.
.sidebar {
width: 16rem;
float: left;
}
@media (max-width: 50rem) {
.sidebar {
width: 100%;
float: none;
}
}
ترکیب ویژگی‌ها با and
ویژگی‌ها را زنجیر کنید تا همه برقرار باشند. برای بازه (min و max با هم) یا جفت کردن عرض با ویژگی دیگر مفید است. ویرگول بین کل فهرست‌های @media یعنی یا.
.card-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}
فراتر از عرض — چاپ (و چند اضافهٔ آرام)
عرض ابزار روزمره است. نوع‌هایی مثل print برای کاغذ کروم را پنهان می‌کنند. ویژگی‌های ترجیح (مثلاً prefers-reduced-motion) برای پرداخت دسترس‌پذیری‌اند — اینجا کم استفاده کنید؛ درس نقاط شکست استراتژی را منظم می‌کند و دسترس‌پذیری بعداً حرکت را پوشش می‌دهد.
@media print {
.site-nav,
.ad-slot {
display: none;
}
body {
color: #000;
background: #fff;
}
}
عادت آرام برای breakpoint
فهرست کوتاهی از عرض‌های نام‌دار بگذارید که با نقاط فشار چیدمان خودتان جور باشد — نه مدل تک‌تک گوشی‌ها. مستندشان کنید (مثلاً «زیر ۴۸rem ناو جمع می‌شود»). پایهٔ سیال + چند کوئری بهتر از جنگل قوانین یک‌بارمصرف برای هر دستگاه است. درس‌های بعد تصویر و برنامهٔ کامل‌تر breakpoint را می‌آورند.
خودتان امتحان کنید
- ناوبری ستونی را بردارید و یک
@media (min-width: …)اضافه کنید که آن را flex کند. - همان ایده را با سفت‌کردن desktop-first با
max-widthبازنویسی کنید — فرق پایه را ببینید. - با
min-widthوmax-widthیک کوئری بازه بسازید که فقط در یک باند دو ستون باشد. - با
@media printیک بنر تزئینی را پنهان کنید. - برای صفحهٔ تمرین سه breakpoint نام‌دار بنویسید — فهرست کوتاه بماند.
اشتباه‌های رایج
- یک کوئری جدا برای هر برند گوشی، به‌جای نقاط فشار چیدمان
- فراموش کردن
}بسته؛ CSS بعدی داخل کوئری می‌ماند و ناپدید می‌شود - قاطی کردن پشتهٔ min-width و max-width تا cascade با خودش بجنگد
- فقط به کوئری تکیه کردن و نادیده گرفتن کانتینر سیال و واحد نسبی درس ریسپانسیو
- ریختن کاتالوگ بلند breakpoint اینجا — آن کار در نقاط شکست ادامه دارد؛ تصویر در تصاویر واکنش‌گرا
جمع‌بندی
- مدیا کوئری CSS را طوری می‌پیچد که فقط وقتی شرط برقرار است اعمال شود
min-widthرو به بالا غنی می‌کند (mobile-first)؛max-widthرو به پایین سفت می‌کند (desktop-first)andهمهٔ ویژگی‌ها را می‌خواهد؛ ویرگول بین کوئری‌ها نقش یا دارد- چند breakpoint نام‌دار، گره خورده به نیاز واقعی چیدمان، کافی است
- بعدی: تصاویر واکنش‌گرا — رسانه‌ای که scale شود و ستون را نشکند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود