در دنیای امروز وب، مفهوم طراحی واکنشگرا بسیار مهم شده است. افراد از انواع مختلف دستگاه‌ها و اندازه‌های صفحه نمایش برای مشاهده وب‌سایت‌ها استفاده می‌کنند. از تلفن‌های همراه تا رایانه‌های شخصی، هر کدام دارای ویژگی‌ها و نیازهای خود هستند. در این موقعیت، مدیا کوئری‌ها به عنوان یکی از ابزارهای اصلی طراحی واکنشگرا در CSS هستند. در این مقاله به بررسی مدیا کوئری در CSS خواهیم پرداخت و مثال‌هایی کاربردی از آن را پیاده سازی می‌کنیم. همچنین پیشنهاد می‌کنیم آموزش grid در CSS را نیز مطالعه نمایید.
چرا مدیا کوئری در CSS مهم است؟
زمانی که یک وب‌سایت یا برنامه وب را طراحی می‌کنید، باید در نظر داشته باشید که کاربران از انواع مختلف دستگاه‌ها و اندازه‌های صفحه نمایش برای دسترسی به محتوای شما استفاده می‌کنند. ممکن است کاربری تلفن همراه باشد که وضوح صفحه نمایش کمتری دارد یا یک رایانه شخصی با صفحه نمایش بزرگ. به علاوه، ممکن است دستگاه کاربر در حالت عمودی یا افقی باشد.
در این موارد، طراحی واکنشگرا اهمیت دارد. یعنی وب‌سایت یا برنامه وب شما باید بتواند به درستی و بهینه بر روی همه این دستگاه‌ها کار کند. مدیا کوئری‌ها در CSS به شما این امکان را می‌دهند که استایل‌های مختلفی را بر اساس ویژگی‌های دستگاه کاربر تعریف کنید. به این ترتیب، می‌توانید وب‌سایت خود را برای هر نوع دستگاه بهینه کنید و تجربه کاربری بهتری ارائه دهید.
چگونگی کار با مدیا کوئری در CSS
مدیا کوئری در CSS به وسیله دستور @media تعریف می‌شوند. این دستور به مرورگر اعلام می‌کند که یک مدیا کوئری در حال شروع است. مهمترین بخش‌های یک مدیا کوئری شامل:
@media: دستور اصلی برای شروع مدیا کوئری.only screen: نوع دستگاه که می‌خواهید مدیا کوئری را برای آن تعریف کنید. معمولاً ازonly screenبرای دستگاه‌های نمایش صفحه‌ای استفاده می‌شود.(ویژگی): ویژگی‌ای که می‌خواهید مدیا کوئری را بر اساس آن تعریف کنید. به عنوان مثال، می‌توانید مدیا کوئری را بر اساس عرض صفحه نمایش یا نسبت عرض به ارتفاع تعریف کنید.
یک مثال ساده از یک مدیا کوئری به شکل زیر است:
@media only screen and (max-width: 768px) {
/* استایل‌هایی که در صورت برقراری ویژگی اعمال می‌شوند */
}
در این مثال، مدیا کوئری تعریف شده برای صفحه‌های نمایش با عرض کمتر از 768 پیکسل است. اگر عرض صفحه نمایش کمتر از این مقدار باشد، استایل‌های مشخص در داخل مدیا کوئری اعمال می‌شوند.
ویژگی‌های متداول مدیا کوئری
مدیا کوئری بر اساس عرض صفحه نمایش
یکی از مدیا کوئری‌های رایج، مدیا کوئری بر اساس عرض صفحه نمایش است. این مدیا کوئری به شما امکان می‌دهد تا استایل‌های مختلفی را بر اساس عرض صفحه نمایش تعریف کنید. به عبارت دیگر، می‌توانید تصمیم بگیرید که در چه اندازه‌ای از صفحه نمایش چه استایلی نمایش داده شود.
مثال:
/* استایل برای صفحه‌های با عرض کمتر از 768 پیکسل */
@media only screen and (max-width: 768px) {
/* استایل‌هایی که در صورتی که عرض صفحه نمایش کمتر از 768 پیکسل باشد اعمال می‌شوند */
}
مدیا کوئری بر اساس نسبت عرض به ارتفاع
مدیا کوئری بر اساس نسبت عرض به ارتفاع صفحه نمایش به شما امکان می‌دهد تا استایل‌های مختلفی را بر اساس نسبت عرض به ارتفاع تعریف کنید. این مدیا کوئری مفید است زمانی که می‌خواهید به تغییرات در نسبت عرض به ارتفاع صفحه نمایش واکنش نشان دهید.
مثال:
/* استایل برای صفحه‌های با نسبت عرض به ارتفاع 16:9 */
@media only screen and (aspect-ratio: 16/9) {
/* استایل‌هایی که در صورتی که نسبت عرض به ارتفاع 16:9 باشد اعمال می‌شوند */
}
مدیا کوئری بر اساس نوع دستگاه
مدیا کوئری بر اساس نوع دستگاه به شما امکان می‌دهد تا استایل‌های مختلفی را برای انواع مختلف دستگاه‌ها تعریف کنید. به عبارت دیگر، می‌توانید تصمیم بگیرید که برای تلفن‌همراه‌ها چه استایلی و برای رایانه‌های شخصی چه استایلی نمایش داده شود.
مثال:
/* استایل برای تلفن‌همراه */
@media only screen and (max-width: 480px) {
/* استایل‌هایی که در صورتی که عرض صفحه نمایش کمتر از 480 پیکسل باشد اعمال می‌شوند */
}
/* استایل برای رایانه شخصی */
@media only screen and (min-width: 1024px) {
/* استایل‌هایی که در صورتی که عرض صفحه نمایش بیشتر از 1024 پیکسل باشد اعمال می‌شوند */
}
مدیا کوئری بر اساس جهت صفحه نمایش
مدیا کوئری بر اساس جهت صفحه نمایش به شما امکان می‌دهد تا استایل‌های مختلفی را بر اساس جهت (عمودی یا افقی) صفحه نمایش تعریف کنید. این مدیا کوئری مفید است زمانی که می‌خواهید تغییرات مختلفی برای جهت صفحه نمایش اعمال کنید.
مثال:
/* استایل برای صفحه‌های با جهت عمودی */
@media only screen and (orientation: portrait) {
/* استایل‌هایی که در صورتی که جهت صفحه نمایش عمودی باشد اعمال می‌شوند */
}
/* استایل برای صفحه‌های با جهت افقی */
@media only screen and (orientation: landscape) {
/* استایل‌هایی که در صورتی که جهت صفحه نمایش افقی باشد اعمال می‌شوند */
}
مثال‌های کاربردی media query
تغییر استایل برای تلفن‌همراه
یکی از مثال‌های رایج استفاده از مدیا کوئری، تغییر استایل برای تلفن‌همراه است. ممکن است بخواهید تا وقتی کاربران از یک تلفن همراه به وب‌سایت شما دسترسی پیدا می‌کنند، تجربه کاربری بهتری برای آنها ارائه دهید. به عنوان مثال، در یک تلفن همراه، ممکن است نیاز به نمایش منوی کوچکتر یا تغییر در ترتیب موارد داشته باشید.
/* استایل برای تلفن‌همراه با عرض کمتر از 768 پیکسل */
@media only screen and (max-width: 768px) {
/* استایل‌هایی که در صورت برقراری ویژگی اعمال می‌شوند */
.menu {
font-size: 16px;
}
.menu-item {
padding: 10px;
}
}
در این مثال، مدیا کوئری تعریف شده برای تلفن‌همراه‌ها با عرض کمتر از 768 پیکسل است. اگر عرض صفحه نمایش کمتر از این مقدار باشد، استایل‌های مشخص در داخل مدیا کوئری اعمال می‌شوند. در اینجا، فونت‌ها کوچکتر شده و پدینگ‌ها افزایش می‌یابند تا مناسب تلفن‌همراه‌ها باشند.
تغییر استایل برای رزولوشن نمایش‌ها
یکی دیگر از مثال‌های مفید مدیا کوئری، تغییر استایل برای نمایش‌های با کیفیت بالا (معمولاً نمایش‌های رزولوشنی) است. نمایش‌های با کیفیت بالا دارای چگالی پیکسل بالاتری هستند و به شما این امکان را می‌دهند تا تصاویر و آیکون‌ها با کیفیت‌تری نمایش دهید.
/* استایل برای نمایش‌های با کیفیت بالا (رتینا) */
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* استایل‌هایی که در صورت برقراری ویژگی اعمال می‌شوند */
.icon {
background-image: url('icon@2x.png');
background-size: 32px 32px;
}
}
در این مثال، مدیا کوئری تعریف گردیده برای نمایش‌های با کیفیت بالا است. اگر دستگاه کاربر یک نمایش با کیفیت بالا داشته باشد (معمولاً با چگالی پیکسل بالا)، استایل‌های مشخص در داخل مدیا کوئری اعمال می‌شوند. در اینجا، یک تصویر با کیفیت بالا به جای تصویر استاندارد برای آیکون‌ها استفاده گردیده و اندازه آن تغییر می‌کند.
تغییر استایل برای چاپ
مدیا کوئری می‌تواند همچنین برای تغییر استایل صفحات چاپ مفید باشد. وقتی کاربران صفحه را چاپ می‌کنند، ممکن است نیاز به حذف عناصر غیرضروری یا تغییر در قالب داشته باشید.
/* استایل برای صفحات چاپ */
@media print {
/* استایل‌هایی که در صورت چاپ صفحه اعمال می‌شوند */
.header, .footer, .sidebar {
display: none;
}
}
در این مثال، مدیا کوئری تعریف شده برای صفحات چاپ است. در زمان چاپ، عناصر مشخص در داخل مدیا کوئری مخفی می‌شوند تا فقط محتوای اصلی چاپ شود.
تغییر استایل برای صفحات وب نرمال و حالت تاریک
با ظهور وضعیت‌های نمایش نرمال و حالت تاریک در سیستم‌عامل‌ها و مرورگرها، می‌توانید از مدیا کوئری‌ها برای تنظیم استایل‌ها برای هر یک از این حالت‌ها بهره‌ببرید. به عنوان مثال، اگر بخواهید متن‌های تاریک‌تر و پس‌زمینه‌های نمایش نرمال را داشته باشید، می‌توانید از مدیا کوئری‌ها استفاده کنید.
/* استایل برای نمایش نرمال */
@media (prefers-color-scheme: light) {
/* استایل‌هایی که در صورت استفاده از حالت نورمال اعمال می‌شوند */
body {
background-color: white;
color: #333;
}
}
/* استایل برای حالت تاریک */
@media (prefers-color-scheme: dark) {
/* استایل‌هایی که در صورت استفاده از حالت تاریک اعمال می‌شوند */
body {
background-color: #333;
color: white;
}
}
در این مثال، مدیا کوئری‌ها بر اساس ترجیحات رنگی سیستم عامل کاربر تعریف شده‌اند. در صورتی که کاربر حالت نرمال را ترجیح دهد، استایل‌های مناسب برای نمایش روشن اعمال می‌شوند و در حالت تاریک، استایل‌های مناسب برای حالت تاریک اعمال می‌شوند.
توصیه‌ها
در این مقاله، مفهوم مدیا کوئری‌ها و کاربردهای آن در CSS را بررسی کردیم. مدیا کوئری‌ها به شما این امکان را می‌دهند تا استایل‌های مختلفی بر اساس ویژگی‌های دستگاه کاربر تعریف کنید، از جمله عرض صفحه نمایش، نوع دستگاه، نسبت عرض به ارتفاع و جهت صفحه نمایش.
استفاده صحیح از مدیا کوئری‌ها می‌تواند تجربه کاربری را بهبود بخشد و از افراد با انواع مختلف دستگاه‌ها پشتیبانی کند. برای بهره‌برداری کامل از مدیا کوئری‌ها، پیشنهاد می‌شود که به دقت و با توجه به نیازهای خود از آنها استفاده کنید.
همچنین، همواره تست و اعتبارسنجی استایل‌های مختلف در دستگاه‌ها و مرورگرهای مختلف را انجام دهید تا اطمینان حاصل کنید که وب‌سایت یا برنامه وب شما به درستی واکنش نشان می‌دهد. اینکه آیا مدیا کوئری‌های شما به درستی عمل می‌کنند یا نه، می‌تواند تاثیر زیادی بر تجربه کاربری داشته باشد
