مدیا کوئری

به وسیله مدیا کوئری می توان استایل مورد نظر را فقط محدود به شرایط خاصی در یک مدیا کرد.

مدیا کوئری را می توان مثل یک شرط برای مرورگر دید که اگر آن شرط بر قرار باشد مرورگر استایل های مشخص شده را تفسیر و اعمال می کند.

در مطلب مربوط به دستور media، مدیاهای مختلفی که می توانند توسط سی اس اس تشخیص داده شوند بیان شدند و در این مطلب به بیان شرایط و ویژگی هایی که می توانند به عنوان شرط در مدیا کوئری نوشته شوند می پردازیم.

سینتکس مدیا کوئری


@media [not | only] <media-type> [and] (<media-condition>);

نوع مدیا

در سی اس اس چهار گروه اصلی مدیا قابل تشخیص هستند. که شامل all، speech، print و screen می باشند. بقیه موارد منسوخ اند و اگر از آنها استفاده کنیم مرورگر آن نوع را نادیده می گیرد و استایل های نوشته شده را برای همه دستگاهها نمایش می دهد.

all

همه نوع دستگاه ها و مدیا

print

دستگاه پرینتر یا هر دستگاهی که می خواهد حالت پرینت را نمایش دهد مثل مرورگری که می تواند حالت پیش نمایشی از صفحه چاپ شده داشته باشد.

speech

صفحه خوان ها (screen readers) و هر دستگهایی که عملیات تبدیل متن به گفتار را انجام می دهد.

screen

همه دستگاهایی که در دسته speech یا print قرار نمی گیرند. (صفحه نمایش ها)

ویژگی های مدیا

ویژگی های مدیا خیلی جزیی تر از نوع مدیا عمل می کنند. در این مورد مدیا کوئری یک ویژگی خاص را در مورد مدیا مورد سوال قرار می دهد و اگر آن شرط بر قرار باشد استایل های نوشته شده اعمال می شوند.

سینتکس این مورد کاملا شبیه به ویژگی های سی اس اس می باشد بطوری که یک نام ویژگی وجود دارد یک علامت دونقطه و مقدار آن ویژگی جلوی آن قرار می گیرد.

به عنوان نمونه در زیر مدیا کوئری نوشته شده screen را به عنوان نوع مدیا در نظر می گیرد و ویژگی سوال شده min-width دستگاه می باشد که در این شرط باید 40em باشد:


@media screen and (min-width: 40em) {
  /* استیال ها */
}

پس در مثال بالا دنبال صفحه نمایشی با عرض کمتر از 40em هستیم.

لیست ویژگی هایی که می توانند بصورت شرطی در مدیا کوئری قرار بگیرند به شرح زیر می باشند:

  • ابعاد صفحه نمایش/دستگاه

    • width
    • height
    • aspect-ratio
    • orientation
  • کیفیت صفحه نمایش

    • resolution
    • scan
    • grid
    • update
    • overflow-block
    • overflow-inline
  • رنگ

    • color
    • color-index
    • monochrome
    • color-gamut
  • موارد تعاملی

    • pointer
    • hover
    • any-pointer and any-hover
  • اسکریپت نویسی

    • scripting

طراحی واکنشگرا

برای اینکه بتوانیم یک صفحه Responsive یا همان واکنشگرا داشته باشیم باید نقاط شکست یا همان Breakpoint ها را در طرح خود پیدا کنیم و با استفاده از آن نقاط می توانیم کوئری مناسب را بنویسیم.

به عنوان نمونه در مثال زیر می خواهیم تا در عرض های کمتر از 35em دو قسمت Main و Sidebar در زیر هم قرار بگیرند و زمانی که عرض بیشتر از 35em (یعنی همان 560px) است این دو قسمت در کنار هم قرار بگیرند.


@media (min-width: 35em) {
  .main {
    width: 67%;
    float: left;
  }

  .sidebar {
    width: 33%;
    float: right;
  }
}

کد بالا به مرورگر می گوید فقط زمانی که عرض Viewport برابر یا بیشتر از 35em است کدهای داخل بلاک را اجرا کن. که در این صورت در دستگاههایی که صفحه نمایش آنها بیشتر از 35em است دو ستون در کنار هم و در دیگر موارد زیر هم قرار می گیرند.

برای اینکه بتوان از مدیا کوئری ها استفاده کرد باید در تگ <head> تگ متای زیر را قرار دهیم:


<head>
  <meta name="viewport" content="initial-scale=1, width=device-width" />
</head>

برای بررسی بیشتر این متاتگ به این لینک مراجعه کنید.

با کوچک و بزرگ کردن صفحه دموی زیر این موضوع را بررسی کنید:

 

See the Pen Media Query by Mojtaba Seyedi (@seyedi) on CodePen.


 

پشتیبانی مرورگر ها

بیشتر بخوانید

4 دیدگاه برای “مدیا کوئری

  1. با سلام.
    مشکلی که من همیشه با مدیاکوئری ها دارم اینه که اول استایل
    هام رو داخل مدیاکوئری هایی بنویسم که اشاره به سایزهای کوچک مرورگر داره و
    بعد بیام مدیاکوئری هایی که سایز بزرگتر مرورگر رو هدف قرارمیگیره بنویسم
    یا اصلا بیام استایل هایی که بیشتر واسم مهمه رو خارج از مدیاکوئری
    بنویسم(مثلا برای سایز دسکتاپ) و استایل هایی که کمتر از سایز دسکتاپ هستند
    رو داخل مدیاکوئری بنویسم. یا کلا تلفیق همه این موارد!!!
    راه اصولی چیه دقیقا؟

    1. سلام.

      توی کارگاه ثبت نام نمی کنید این میشه نتیجش ;)

      ببنید یک راه حل اصولی ثابت وجود نداره بستگی به شرایط داره ولی یک روش عمومی خوب هست اونم این که:

      اول بدون نوشتن هیچ مدیاکوئری طرح موبایل رو بزنید. حالا شروع کنید Viewport رو بزرگ کنید هر جا که نیاز بود طرح تغییر کنه برای همون نقطه به بعد با min-width یک مدیا کویری بنویسید و استایل ها را ثبت کنید. تمام که شد دوباره مرورگر رو بزرگ تر کنید و همین کار رو ادامه بدین تا برای صفحه نمایش های مختلف طرح پیاده بشه

      به این روش میگن mobile first که فعلا بهترین روشه در حالت عمومی

      موفق باشید.

      1. کارگاه اینطوری نتیجه نمیده مجتبی جان. اگه بشه کلاس حضوری گذاشت که عالی
        میشه، در غیر اینصورت آموزش مجازی و حضور آنلاین همه ی بچه هایی که توی
        کارگاه ثبت نام کردند در صورتی ثمربخش هستش که همه بتونن داخل یک اتاق
        گفتگو با هم بحث و تبادل نظر کنند، تلگرام راه حل اش نیست بنظرم(حالا بیشتر
        صحبت میکنیم).

        واسه سوالی که پرسیدم: از اونجایی که بوت استرپ
        MobileFirst هستش اما بازم این قانون توی بعضی از کدهاش رعایت نشده(نسخه
        3). مثلا نوشته ستون هایی که کمتر از 768 هستند، دوباره اومده ستون هایی که
        کمتر از 992 هستند رو override کرده و در آخر بازم ستون هایی که کمتر از
        1200 هستند رو روی سایز قبلی override کرده. این یعنی استایل هایی که واسه
        768 پیکسل و 992 پیکسل هستند در دل سایز 1200 هم گنجانده شدند.

        خب
        اگه قضیه performance مهم باشه، چرا نمیاد از max-width و min-width توی مدیاکوئری استفاده کنه تا استایل ستون ها رو از بازه ی
        0-768 و 769-991 و 992-1200 بنویسه که کدهای قبلی پردازش نشن؟!

        کاری
        به آمار و ارقام منتشر شده نداریم. اما خود من وقتی سایتی رو میزنم اولویت
        ام برای کسانی هست که سایز مانیتورشون دسکتاپ هستش، بعد سایز موبایل رو
        طبق اون درست میکنم. اما خب در نهایت سایتی میشه که به اصطلاح
        MobileFriendly میگیم و توی تمام دستگاه ها بدرستی کار میکنه.
        انگار خیلی وقت ها لازمه بجای MobileFirst از MobileLast :) استفاده کنیم!

        در
        کل، سوال ها و موضوعی که بهش اشاره کردم، راجع به طریقه ی اصولی نوشتن
        استایل های مدیاکوئری برای ریسپانسیو شدن و Performance اون هستش.
        خیلی دوست دارم نظر کارشناسی خودت رو بدونم چون کارایی و استاندارد نویسی بحث مهم و اساسی و جذاب کار ماست.

        1. کلاس زبان که نیست… کارگاه فنی هستش. توی یک کارگاه هم بحثی که مربی مطرح میکنه مهمه و سوالات بچه ها (رابطه بین مربی و فرده). که این دو موضوع با این روش مشکلی نداره. خداروشکر دوستان انجام دادن شد ما هم به امید خدا انجام میدیم میشه و در هر صورت تجربه خوبی میشه مخصوصا واسه من.

          سوال خیلی خوبیه. ببنید تا جایی که من میدونم و تحقیق کردم این بحثی که مطرح می کنید تاثیرش روی performance نا چیزه. البته من کلا bootstrap رو کاری نداره.

          ببنید mobile first بحث css نیست. این بحث از زمان طراحی باید مطرح بشه و کل فلسفه ش هم اینه که باعث میشه تمرکز اولیه روی موبایل باشه وچون در موبایل محدودیت اندازه صفحه نمایش و محدودیت شبکه ای و محدودیت پردازشی وجود داره این باعث میشه تا ما تمرکزمون رو به طور کامل روی محتوا بزاریم و مهم ترین محتوا رو به کاربر نمایش بدیم. که در کل تجربه عالی به کاربر میرسونه.

          محتواهای کلیدی در موبایل نمایش داده میشن و به مرور هر چه دستگاه ها از نظر محدودیت های گفته شده بهبود پیدا میکنن ما هم محتوا رو بیشتر و نحوه ارایه رو بهبود میدیم. که این خودش قدم بزرگی در راستای Progressive Enhancement هستش.

          تاثیرش توی سی اس اس چیه؟ فرض کنیم می خوایم Desktop first بنویسیم. اینجوری باید هر چه که توی دستکتاپ هست رو براش استایل بنویسیم حالا هر چه که توی موبایل نیست رو حذف کنیم. این یعنی “دو عمل”. که تعداد خطوط سی اس اس زیاد میشه. حتی نگهداری پروژه هم توی این مورد جالب نیست (توی پروژه های بزرگ)

          حالا وقتی Mobile First کار میکنیم هر آنچه که هست رو براش استایل میدیم حالا هر چی که قراره توی Desktop اضافه بشه رو کم کم اضافه میکنیم. این یعنی “یک عمل”

          مهم نیست که کاربرای دسکتاپی بیشتره… مهم اینه “همه” بتونن بهترین تجربه رو داشته باشند.

          فارق از هر بحثی حتما یک پروژه رو Mobile first انجام بدین. (Mobile first واقعی) یعنی توی فاز اول فقط بدون مدیا کویری بنویسید برای موبایل. بعد کم کم از مدیا کویری ها برای اضافه کردن و بهبود محتوا استفاده کنید. واقعا لذت بخش تر و کار تمیز تر انجام میشه.

          من سوادم همین قدره امیدوارم بتونم کمکتون کنم. اینم بدونید که بحث بحث مهمی هستش. ولی همیشه کارهای تیم های بزرگ رو هم نگاه کنید. ( نه حالا bootstrap :) ) میتونه روشاشون کمکتون کنه.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *