Examples of CSS Media Queries

سلام! اگه دوست داری که وبسایتت به‌خوبی روی همه دستگاه‌ها و سایزهای نمایشگر مختلف کار کنه، قطعاً باید از یکی از ویژگی‌های جالب CSS که به اون مدیا کوئری میگن، استفاده کنی. مدیا کوئری‌ها به ما این امکان رو میدن که استایل‌های CSS رو برای دستگاه‌ها و شرایط مختلف طراحی کنیم. حالا بیاین نگاهی به چند تا مثال ساده بندازیم ببینیم چطوری میشه از این قابلیت استفاده کرد.

مدیا کوئری‌ها خیلی مهمن واسه اینکه طراحی‌های ریسپانسیو و واکنش‌گرا بسازیم. دیگه اون روزها گذشته که فقط برای کامپیوترهای دسکتاپ طراحی می‌کردیم. الان با وجود گوشی‌های هوشمند، تبلت‌ها و انواع نمایشگرها، باید مطمئن بشیم طراحی‌هامون توی همه اینا خوب دیده میشه.

حالا فرض کن می‌خوای یه دکمه طراحی کنی که وقتی صفحه کوچیک میشه (مثلاً وقتی کاربر با موبایل سایت رو می‌بینه) یه رنگ و سبک دیگه به خودش بگیره. با استفاده از مدیا کوئری‌ها، می‌تونی این کار رو به‌راحتی انجام بدی. توی مثال‌هایی که اینجا داریم، نشون میدیم که چیجوری میشه با استفاده از مدیا کوئری رنگ و استایل یه دکمه رو تغییر داد.

یکی دیگه از کاربردهای مدیا کوئری‌ها اینه که می‌تونی قسمت‌هایی از سایت رو که در سایزهای کوچیکتر نیازی به نمایش ندارن، مخفی کنی. برای مثال، شاید بخوای یه تصویر یا منوی جانبی رو که در سایزهای کوچیک جا نمی‌گیرن و نیاز نیستن، حذف کنی.

پس اگه بخوایم خلاصه کنیم، مدیا کوئری‌ها به ما قدرت یه طراحی تطبیق‌پذیر و کاربران نامحدود بیشتری رو میدن. با این قابلیت، می‌تونی به‌راحتی به نیازهای کاربرانت پاسخ بدی و تجربه کاربری بهتری ارائه کنی.

@media screen and (max-width: 600px) {\r\n  body {\r\n    background-color: lightblue;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: 601px) and (max-width: 1200px) {\r\n  body {\r\n    background-color: lightgreen;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: 1201px) {\r\n  body {\r\n    background-color: coral;\r\n  }\r\n}\r\n

توضیح خط به خط کد