کوئری های رسانه ای (Media Queries) در CSS
«کوئری های رسانه ای (Media Queries)» به شما اجازه می دهد بر اساس ویژگی های دستگاه یا محیطِ نمایش، استایل های متفاوت اعمال کنید. بنابراین صفحات «واکنش گرا (Responsive)» می سازید و تجربه ی بهتری روی موبایل، تبلت و دسکتاپ ارائه می دهید.
تعریف و کاربرد کوئری های رسانه ای
قانون @media سبک ها را زمانی اعمال می کند که نوع رسانه و ویژگی های رسانه ای به «true» ارزیابی شوند. در این حالت، قوانین مطابق زنجیره آبشاری CSS اعمال می شوند.
نحو نگارش Media Query
هر کوئری می تواند یک «نوع رسانه (media-type)» اختیاری و یک یا چند «ویژگی رسانه ای (media-features)» داشته باشد. کلیدواژه and شروط را ترکیب می کند و not نتیجه کل کوئری را معکوس می کند.
@media screen and (min-width: 480px) and (orientation: landscape) { /* CSS rules */ }نکته: اگر از not استفاده می کنید، باید نوع رسانه را نیز مشخص کنید.
انواع رسانه در CSS
نوع رسانه مشخص می کند قوانین برای چه محیطی هدف گذاری شده اند. اگر تعیین نشود، مقدار all در نظر گرفته می شود:
all— همه دستگاه هاscreen— نمایشگرها مانند رایانه، تبلت و گوشیprint— پیش نمایش چاپ
ویژگی های رایج رسانه ای
برخی ویژگی های پرکاربرد شامل min-width، max-width، orientation، resolution و prefers-color-scheme هستند.
مثال: حداقل عرض
@media screen and (min-width: 480px) { body { background-color: lightgreen; } }مثال: بازه عرض (min و max)
@media screen and (min-width: 480px) and (max-width: 768px) { body { background-color: lightgreen; } }با این الگو می توانید طرح بندی، تایپوگرافی یا رنگ بندی را در بازه های مختلف عرض تغییر دهید و به «کوئری های رسانه ای» انعطاف بیشتری بدهید.
مطالعه بیشتر
برای ادامه کار با «کوئری های رسانه ای»، مثال های بیشتر را در صفحه بعدی ببینید و همچنین موضوعات مرتبط را مطالعه کنید.
- MDN: @media
- MDN: آموزش Media Queries
- box-sizing در CSS — کنترل مطمئن اندازه جعبه
- متغیرها در Media Queries — استفاده از CSS Variables در MQ