پاسخ : سوال در مورد @media در سی اس اس
سلام،
ترتیب قرارگیری هم تاثیر داره.
اگر از یک سلکتور یکسان استفاده کنید، استایلی که پایین تر (آخرتر) هست، اجرا میشه.
در مثال زیر سه تا کویری نوشتم،
اولی وقتی اجرا میشه که صفحه نمایش بزرگتر از 1200 هست
دومی وقتی که صفحه کوچکتر از 1200 هست
سومی وقتی که صفحه کوچکتر از 980 هست
اگه جای کویری ها رو تغییر بدید و مثلا کویری سوم رو بیارید بالای کویری دوم، دیگه کویری سوم (980) اثر خودش رو از دست میده:
دمو:کد:<!DOCTYPE html> <html> <head> <style> @media screen and (min-width: 1201px){ div::before { content: "صفحه بزرگتر از 1201 پیکسل است."; } } @media screen and (max-width: 1200px){ div::before { content: "صفحه کوچکتر از 1200 پیکسل است."; } } @media screen and (max-width: 980px){ div::before { content: "صفحه کوچکتر از 980 پیکسل است."; } } </style> </head> <body></body> </html>
https://jsfiddle.net/sabeti05/krs1jnce/1/
پاسخ با نقل قول