پرس وجوهای رسانه ای (Media Queries)
«پرس وجوهای رسانه ای (Media Queries)» یعنی استایل بر اساس ویژگی دستگاه عوض شود. مثلا عرض موبایل کم است؛ پس اندازه ها کوچک شوند. بنابراین وب سایت «واکنش گرا» می شود و همه جا خواناست.
قانون @media و ساختار پایه
@media یک «قانون (Rule)» در CSS است. با آن شرط می گذاریم. اگر شرط درست شد، همان استایل ها اعمال می شوند.
@media screen and (min-width: 768px) {\n /* CSS rules go here */\n}\nنوع رسانه و کلیدواژه ها
نوع رسانه می تواند screen، print یا all باشد. کلیدواژه های and و not هم شرط ها را ترکیب یا برعکس می کنند.
نمونه: تغییر رنگ پس زمینه با حداقل عرض
اگر عرض دید (Viewport) حداقل 480 پیکسل بود، رنگ پس زمینه سبز شود.
@media screen and (min-width: 480px) {\n body {\n background-color: lightgreen;\n }\n}\nنمونه: بین دو اندازه مشخص
اگر عرض بین 480 و 768 پیکسل بود، همان رنگ سبز اعمال شود.
@media screen and (min-width: 480px) and (max-width: 768px) {\n body {\n background-color: lightgreen;\n }\n}\nگام های عملی
- عرض های مهم را مشخص کن؛ مثلا 480 و 768.
- قوانین @media را با
andبنویس. - رنگ، اندازه فونت، چیدمان را تطبیق بده.
نکته: همیشه با «موبایل اول» شروع کن؛ سپس برای عرض های بزرگ تر، استایل اضافه کن.
جمع بندی سریع
- پرس وجوهای رسانه ای، استایل را شرطی می کنند.
- @media قلب طراحی واکنش گراست.
andشرط ها را ترکیب می کند.notنتیجه را برعکس می کند.
مطالب مرتبط: استفاده از پرس وجوهای رسانه ای با متغیرها، و طراحی واکنش گرا برای ساخت صفحات سازگار.