امان از دست این مدیا کوئری! دوست داشتی، به درد بخور اما سردرد آورد :) ساختار نوشتنشون (syntax) یکم عجیب غریبه حداقل برای من و حتی ممکنه بعد از مدت ها استفاده ازشون بازم قاعده رو درست رعایت نکنیم مثلا وقتی میگیم min-width: 300pxیعنی چی اصلا؟ با من همراه شین تا با ویژگی که ارائه شده تا کوئری خوشگل تری رو بنویسیم بهتون بگم، اگه هم که قبلا راجبش خوندین یه مرور مجدد داشته باشیم.
همونطور که احتمالا می دونید اگر بخواین یک کوئری برای اندازه های صفحه نمایش بزرگتر از یک عرض مشخص تعریف کنید، چیزی شبیه به این می نویسید:
@media (min-width: 1000px) {}
این مدل نوشتن فقط در عرض صفحه‌های 1000 پیکسل و بزرگتر اعمال میشن. اگر می خواین همین کارو را برای اندازه های کوچیک صفحه نمایش انجام بدین، همچین کاری رو باید انجام بدین:
@media (max-width: 700px) {}
خب رفقا، حالا اگه بخوایم با روش قدیم یه استایلی برای دستگاه های ما بین این دوتا سایز اعمال کنیم چیکار کنیم؟
این روش قابل استفاده اس:
@media (max-width: 700px) and (min-width: 1000px) {}
این مدیا کوئری برای هر صفحه‌ای با عرض بین 700 تا 1000 پیکسل اعمال میشه، اما به طور کلی درک اون برای بیشترمون سخته و به عنوان مثال، اگه بخواین حالا ترکیبی از دستگاه ها مثله موبایل و دیوایس های رو میزی رو داشته باشین اوضاع پیچیده تر میشه. اینجاس که کوئری های جدید وارد میشن :)
بیاین کوئری هایی که قبلا نوشتن رو باز نویسی کنیم با روش جدید:
/* Greater than or equal to 1000px */ @media (width >= 1000px) {} /* Less than or equal to 700px */ @media (width <= 700px) {} /* Between 700px and 1000px */ @media (700px <= width <= 1000px) {}
این مدل جدید کوئری ها با اضافه کردن کمتر و بیشتر کد نویسی کوئری هارو راحت تر میکنه برامون و مهمتر از اون خوندنشون رو بسیار آسون‌تر میکنه. من که خیلی با این ویژگی ما بین دوتا سایز حال میکنم حقیقتا :) تو لیست زیر ویژگی های جدیدی که اضافه شده به کوئری هارو باهم میبینیم:
<<=>>==خب چهارتایی اولی که مشخصه اما داستان اون = آخری چیه؟ قصه از این قراره که شاید لازم باشه وقتی دقیقا سایز صفحه نمایش برابر با یه عددی مثلا 999 پیکسل شد یه بلایی سره سایتمون بیاریم اینجاست که این مساوی کاری خودشو انجام میده.
مثال زیرو ببینین رفقا:
@media (min-width: 500px) {}
@media (max-width: 500px) {}
کوئری اول زمانی اتفاق میفته که دیوایس ها سایزشون بزرگتر از 500 باشه، دومی هم زمان اجرا میشه که کمتر از 500 باشن. اما شما به من بگین که چه بلایی سره خوده 500 میاد؟ اینجاس که مدل کوئری نویسی جدید میاد به داد ما میرسه:
@media (width >= 500px) {}
@media (width < 500px) {}
حالا با این روش اگه لازم باشه خوده 500 هم هندل میشه به همین قشنگی، به همین خوشمزگی :)
این خیلی خوف و خفن نیست ولی شاید روال توسعه رو و حل باگ تو موارد ریسپانسیو رو برامون بسیار راحت تر از قبل بکنه.
اما مسئله مهم تر پشتیبانی مرورگرها از این ویژگیه! خب میشه گفت بیشتر مرورگر ها از ویژگی پشتیبانی میکنن اما در جایی که میخواین مطمن باشین میتونین از ابزاری مثله PostCSS استفاده کنین تا با تبدیل کردن کد ها این ویژگی هارو تو همه مرورگرها براتون ارائه بدن. تو عکس زیر میتونین پشتیبانی مرورگرها از ویژگی رو به طور کامل ببینین:
به پایان آمد این پست و حکایت همچنان باقیست. ویژگی باحالیه حقیقتا، امیدوارم که براتون مفید بوده باشه. خوشحال میشم اگه شما هم تجربه ای از استفاده از این ویژگی رو داشتین برام کامنت کنین نظرتون رو
سایر پست های من در ویرگول
