مدیا کوئری

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

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

در مطلب مربوط به دستور 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.


 

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

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

مطالب مرتبط

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

  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 :) ) میتونه روشاشون کمکتون کنه.

          پاسخ

  4. خیلی وقتا آدم از خوندن کامنت ها به اندازه مطالعه متن اصلی مطلب یاد میگیره
    پاسختون به کامنت ها عالیه و مطالبی برای یاد گرفتن داره. سپاسگزارم

    پاسخ

  5. سلام
    ببخشید می خواستم بدونم چرا در ویژوال 2010 من مدیا کوئری را پشتیبانی نمیکنه
    و زمانی که media@ را می زنم برام کامل نمی کنه؟

    پاسخ

  6. سلام
    من داخل مدیا کوئری Width رو وارد میکنم که مثلا بعد از اینکه طول صفحه به 600 پیکس رسید . Width کوچک تر بشه . این استایل رو واسه بعضی از Div ها زدم ولی کار نمیکنه . متا تگ هم گذاشتم ولی بازم تاثیری نداشت . داخل کروم هم تو بخش inspect روی کد خط میزنه.
    مشکل چی میتونه باشه؟

    پاسخ

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

      پاسخ

  7. سلام مجتبی جان
    ببخشید یه مشکل دارم نمیدونستم کجا باید مطرحش کنم برای همین اینجا پرسیدم
    به وسیله bootstrap یه navbar درست کردم که یه لیست هستش مثل لیست صفحه اول همین سایت که این لیست تو صفحه دسکتاپ افقی هستش ولی وقتی رو موبایل میره عمودی میشه و دکمه bootstrap که اتوماتیک هستش فعال میشه و وقتی میزنی به صورت عمودی میاره الان مشکلی که دارم اینه این لیست یک background-color داره وقتی رو حالت موبایل روی button کلیک میکنم در حال باز شدن لیست یک padding بهش میده و بعد که باز شد لیستم کل صفحه رو میگیره درحال باز و بسته شدن یک padding میده نمیدونم چکارش کنم هر کاریش میکنم این پدینگ نمیره به نظرتون چکارش کنم ؟
    امیدوارم منظورم رو رسونده باشم.

    پاسخ

  8. سلام و خسته نباشید خدمت مجتبی جان
    ببخشید یه سوال داشتم
    آیا راهی هست که بشه داخل jquery مدیا رو وارد کنیم برای مثال میگم من میخوام دستور کلیک که به وسیله jquery نوشتم داخل صفحه دسکتاپ کار نکنه و فقط وقتی صفحه موبایل میره اون دستور کار کنه اگه دستوری هست راهنمایی کنید ممنون از کمکتون
    عید غدیر هم پیشاپیش بهتون تبریک میگم.

    پاسخ

  9. ویژگی سوال شده min-width دستگاه می باشد که در این شرط باید 40em باشد:

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

    پاسخ

  11. سلام
    لطفا بنده رو راهنمایی کنید
    من دارم به صورت دستی با مدیا کوئری ریسپانسیو میکنم اما هر چی عانصر رو درون صفحه سلکت میکنم با کلاس یا ایدی کار نمیکنه یا بکنه مارجین تاپ نمیگیره
    مثلا ایدی من روی یک butten هست اما وقتی تو مدیا کوئری اون butten رو سلکت میکنم و width , height رو میخوام تغییر بدم به جای اینکه رو butten من تاثیر بزاره رو کل صفحه تاثیر میگذاره
    @media screen and (max-width: 411px) {
    #main {
    width: 100%;
    }
    .doctormotion {
    width:250px;
    }
    #mosh1 {
    width: 320px;
    height: 20px;
    font-size: 13px;
    margin-right: 200px;
    }
    }
    واریز هزینه مشاوره
    ارتباط با منشی پزشک

    پاسخ

    1. سلام، لطفا یک دمو توی سایت jsbin.com درست کنید و لینکش رو اینجا بذارید تا بتونیم کمکتون کنیم.
      در ضمن بهتره برای این سوالات از پنل پرسش و پاسخ سایت استفاده کنید، امکاناتش بهتره و دوستان بیشتری بهتون کمک میکنند.

      پاسخ

        1. استایل های خطی توی html برای اون تگ گذاشتین که تاثیرش غلبه میکنه به استایل هایی که توی مدیا کویری دارید.
          در کل همه استایل ها رو بیارید توی سی اس اس، مرتب تر هم بنویسید، درست میشن. اگر هم میخواین با همین روند برید جلو می تونید از important استفاده کنید که فعلا کارتون راه بیفاته که من توصیه نمیکنم.

          پاسخ

          1. خیلی خیلی ممنونم از وقت که که گذاشتید و توضیحاتی که دادید
            مشکلم کامل حل شد و دیگه این اشتباه رو نمیکنم

  13. دنبال راهی ام تا یک متن یا پلیر پخش آنلاین رو فقط در گوشی نمایش بدم و در سایت نمایش داده نشه!
    باید این ک رو چطوری بنویسم
    که فقط توی گوشی ها نشون داده بشه

    پاسخ

سوال داری؟ برو به پنل پرسش و پاسخ

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