طراحی واکنشگرا (Media Query) با css :
طراحی واکنشگرا (Media Query) با css، یکی از روش‌هایی است که به کمک آن می‌توانید طرح صفحات وب خود را برای انواع دستگاه‌ها و اندازه‌های صفحه‌نمایش مختلف بهینه کنید. در این روش، با استفاده از قابلیت Media Query در css، به سادگی می‌توانید سایز و نوع دستگاه مورد استفاده کاربر را تشخیص داده و طرح صفحه‌نمایش را به طور مطلوب تغییر دهید.
برای استفاده از Media Query در css، ابتدا باید به توضیح کوتاهی از نحوه کار آن پرداخت. این روش به صورت شرطی عمل می‌کند و در صورتی که شرطی که در آن تعریف شده است برقرار باشد، اجرا خواهد شد. برای مثال، با توجه به اندازه صفحه‌نمایش، می‌توانید طرح صفحه‌نمایش خود را به شکلی تنظیم کنید که برای دستگاه‌های با صفحه‌نمایش کوچکتر، بهتر نمایش داده شود.
برای تعریف Media Query در css، از قالب زیر استفاده می‌شود:
@media قابلیت (مقادیر) {
/* اعمال تغییرات مورد نظر */
}
در این قالب، قابلیت، نام قابلیتی است که می‌خواهید برای تشخیص دستگاه استفاده کنید. به عنوان مثال، می‌توانید از قابلیت width برای تعیین عرض صفحه‌نمایش استفاده کنید. در مقابل مقادیر، محدوده‌ای از مقادیری است که به قابلیت ارائه شده است. برای مثال، در مورد قابلیت width، می‌توانید از مقادیری مانند px، em، rem و … استفاده کنید.
به عنوان مثال، برای تنظیم طرح صفحه‌نمایش برای دستگاه‌های با عرض صفحه‌نمایش کوچکتر از 600 پیکسل، می‌توانید از قالب زیر استفاده کنید:
@media (max-width: 600px) {
/* اعمال تغییرات مورد نظر */
}
در این قالب، با استفاده از قابلیت max-width، محدوده عرض صفحه‌نمایش را تعیین کردیم و در صورتی که عرض صفحه‌نمایش کمتر از 600 پیکسل باشد، تغییرات مورد نظر را اعمال خواهد کرد.
از جمله انواع قابلیت‌های قابل استفاده در Media Query می‌توان به width، height، orientation، aspect-ratio و … اشاره کرد. با استفاده از این قابلیت‌ها و مقادیر مختلف، می‌توانید طرح صفحه‌نمایش خود را برای هر نوع دستگاه و اندازه صفحه‌نمایش بهینه کنید.
در نهایت، با توجه به اینکه Media Query با css ارائه می‌شود، هرگونه تغییراتی که در آن اعمال می‌شود، صرفاً در بخش ظاهری صفحه‌نمایش اعمال می‌شود و تغییراتی در محتوای صفحه‌نمایش وجود ندارد. به همین دلیل، این روش از اهمیت ویژه‌ای برای وب‌سایت‌هایی که برای دستگاه‌های مختلف بهینه شده‌اند، برخوردار است.
