دوره زبان تخصصی برای برنامه‌نویسان (هدیه ویژه ثبت‌نام در دوره‌های متخصص) (فرصت محدود ⏰)
۰ ثانیه
۰ دقیقه
۰ ساعت
۱ امیر غفاری نسب
اولویت در مدیا کوئری ها
جامعه Html & CSS ایجاد شده در ۱۳ تیر ۱۴۰۱

سلام

ببخشید مدیا کوئری‌ها هم مثل استایل‌های سی اس اس اوور رایت میشن؟

و اینکه اولویتی بینشون هست؟

مثلا دوتا مدیا کوئری داریم اولویت به اولین میرسه یا کلا بینشون اولویتی نیس؟

ممنون میشم راهنماییم کنین

درود

بله اگر دو کوئری مشابه داشته باشید همدیگر رو override میکنند و اونی که آخر نوشته شده اولویت داره. برای مثال در اینجا مقدار 100% اعمال میشه:

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }
}
.logo img{
    width: 100%;
}

البته اگر از !important استفاده کنید اولویت تغییر میکنه اما در حالت کلی این کار درستی نیست، چون یکی از مهمترین مزیتهای استفاده از کوئری اینه که بتونید در حالات مختلف استایل رو مدیریت کنید، نه اینکه کد اضافه بنویسید. لذا بهتر هست مثلا کد بالا به این صورت اصلاح شه تا در حالت عادی 100% باشه و درون حالت خاص به 120% تغییر پیدا کنه:

.logo img{
    width: 100%;
}
@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }
}



بهترین پاسخ
نازنین کریمی مقدم ۱۳ تیر ۱۴۰۱، ۱۰:۲۴