نمونه های MQ (MQ Examples)
تو «نمونه های Media Query» با مثال های واقعی جلو می رویم. بنابراین می بینی چطور با شرط های ساده، چیدمان صفحه روی موبایل و دسکتاپ تغییر می کند.
تغییر رنگ پس زمینه با حداقل عرض
اگر عرض دید حداقل 768 پیکسل شد، پس زمینه و رنگ متن عوض می شود.
/* Base (mobile) */\nbody {\n background-color: olive;\n color: white;\n}\n\n/* ≥768px */\n@media screen and (min-width: 768px) {\n body {\n background-color: blue;\n color: white;\n }\n}\n\n/* ≥992px */\n@media screen and (min-width: 992px) {\n body {\n background-color: tan;\n color: black;\n }\n}\nچیدمان ستونی انعطاف پذیر (Flex)
چهار ستون داریم. سپس برای عرض های کمتر، تعداد ستون ها کم می شود.
* {\n box-sizing: border-box;\n}\n\n.container {\n display: flex;\n flex-wrap: wrap;\n}\n\n.column {\n flex: 25%;\n padding: 20px;\n}\n\n@media screen and (max-width: 992px) {\n .column {\n flex: 50%;\n }\n}\n\n@media screen and (max-width: 600px) {\n .container {\n flex-direction: column;\n }\n}\nمنوی واکنش گرا
روی موبایل لینک های منو زیر هم می آیند تا خواناتر شوند.
ul {\n list-style-type: none;\n margin: 0;\n padding: 0;\n background-color: #333333;\n display: flex;\n}\n\nul li a {\n display: block;\n color: white;\n padding: 14px 16px;\n text-decoration: none;\n}\n\nul li a:hover {\n background-color: #111111;\n}\n\n@media screen and (max-width: 600px) {\n ul {\n flex-direction: column;\n }\n}\nمخفی کردن المان ها در موبایل
گاهی لازم است یک باکس در موبایل نمایش داده نشود.
@media screen and (max-width: 600px) {\n #div1 {\n display: none;\n }\n}\nتغییر اندازه فونت با MQ
در عرض های بزرگ، تیترها را درشت تر کن تا بهتر دیده شوند.
@media screen and (min-width: 600px) {\n #div1 {\n font-size: 80px;\n }\n}\nبر اساس جهت صفحه (orientation)
وقتی صفحه افقی است، پس زمینه آبی روشن شود.
@media only screen and (orientation: landscape) {\n body {\n background-color: lightblue;\n }\n}\nترجیح کاربر: حرکت کمتر
اگر کاربر «کاهش حرکت» را فعال کرده، انیمیشن ها را خاموش کن.
@media (prefers-reduced-motion: reduce) {\n * {\n animation: none !important;\n transition: none !important;\n }\n}\nگام های عملی
- نقاط شکست را تعیین کن؛ مثلا 600، 768، 992.
- قوانین @media را از موبایل اول بنویس.
- layout، اندازه فونت و منو را تطبیق بده.
نکته: ابتدا ساده شروع کن؛ سپس برای عرض های بزرگ تر، افزایشی جلو برو.
جمع بندی سریع
- MQ استایل ها را شرطی می کند.
- Mobile-first معمولا بهتر جواب می دهد.
- Flex با MQ ترکیب فوق العاده ای است.
- به ترجیح کاربر احترام بگذار.
مطالب مرتبط: صفحه ی پرس وجوهای رسانه ای برای قواعد پایه، و اندازه جعبه برای محاسبه دقیق ابعاد.