آموزش مدیا کوئری در CSS3

  • آپدیت شده در تاریخ

آموزش مدیا کوئری در CSS3

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

 

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

نوع مدیا

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

  1. all : همه نوع دستگاه ها و مدیا
  2. print : دستگاه پرینتر یا هر دستگاهی که می خواهد حالت پرینت را نمایش دهد مثل مرورگری که می تواند حالت پیش نمایشی از صفحه چاپ شده داشته باشد.
  3. speech : صفحه خوان ها (screen readers) و هر دستگهایی که عملیات تبدیل متن به گفتار را انجام می دهد.
  4. screen : همه دستگاهایی که در دسته speech یا print قرار نمی گیرند. (صفحه نمایش ها)

 

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

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

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

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

پس در مثال بالا دنبال صفحه نمایشی با عرض کمتر از ۷۶۸px هستیم.

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

  • ابعاد صفحه نمایش/دستگاه
    • 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

 

مدیا کوئری ها و طراحی ریسپانسیو

مدیا کوئری ها به شما امکان سفارش سازی صفحات وب برای محدوده ای از دیوایس ها مثل تلفن های همراه, تبلت, دسکتاپ ها و غیره.. را بدون تغییر در HTML را می دهد.

یک مدیا کوئری در CSS3 شامل نوع مدیا و صفر یا بیشتر عبارات برای مطابقت با نوع و همچنین شرط خاصی از ویژگی های مدیا مثل عرض دیوایس یا رزولوشن صفحه است.

از آنجایی که مدیا کوئری یک دستور منطقی است, می تواند بصورت true یا false باشد.

نتیجه کوئری true خواهد بود اگر که نوع مدیا با نوع مشخص شده در مدیا کویری یکسان باشد و با نوع دیوایس مطابقت داشته باشد, پس تمام دستورات داخل بلاک آن اجرا می شود و استایل مربوطه روی دیوایس اعمال می شود

این یک مثال از  مدیا کوئری در CSS3 برای دیوایس های استاندارد است :

نکته: مدیا کوئری در CSS3 یک راه بسیار عالی برای طراحی ریسپانسیو است. با استفاده از مدیا کوئری ها می تواند سفارش سازی های متفاوتی برای کاربران وب سایت خود که از تلفن های هوشمند یا تبلت ها اعمال کنید بدون آنکه در محتوای صفحه تغییری بوجود بیارید.

 

تغییر عرض ستون ها بر اساس اندازه صفحه

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

بنابراین با استفاده از مدیا کوئری در CSS3 می توانید عرض صفحه وب و المان های مرتبط به آن را برای دادن بهترین تجربه نمایشی به کاربران در دیوایس های مختلف تغییر بدید.

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

برای مثال, اگر اندازه نمایشگر کمتر از ۷۶۸ پیکسل باشد پس ۱۰۰٪ عرض نمایشگر را می گیرد, اگر بزرگتر از ۷۶۸px باشد ولی کمتر از ۱۰۲۴ باشد پس عرض آن ۷۵۰پیکسل می شود و به اینصورت ادامه دارد….

نکته: شما می توانید از خصوصیت box-sizing بر روی المان ها برای ساخت لایه بندی های بصری و منعطف تر با زحمت کمتری بهره ببرید.

تغییر چیدمان صفحه براساس اندازه صفحه

شما می توانید از مدیا کوئری در CSS3 برای ایجاد چیدمان وبسایت های چندستونه که سازگاری و واکنشگرایی بیشتری با دیوایس ها دارند, استفاده کنید.

استایل های زیر به شما نحوه ایجاد چیدمان دوستونه را نشان می دهد که اگر سایز صفحه نمایش بیشتر یا مساوی ۷۶۸ پیکسل بود. اما اگر کمتر از آن بود بصورت چیدمان تک ستونه رندر می شود.

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

 

امیدوارم از آموزش مدیا کوئری در CSS3 نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۴)

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

  1. ارمان ۴ بهمن ۱۳۹۸

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

    پاسخ
    1. حسن شفیعی ۴ بهمن ۱۳۹۸

      سلام. ممنون.
      هر دو آموزش زیر را دنبال کنید :
      https://netparadis.com/css-tutorial-46-css3-flexible-box-layouts-1
      https://netparadis.com/tutorials/web-design
      موفق باشید.

      پاسخ
  2. داریوش ۱۸ آذر ۱۳۹۸

    سلام.ممنون از آموزش های خوبتون
    مدیاکوئری استانداردی که در سایت هایی که از بوت استرپ استفاده نکردن چیه؟

    پاسخ
    1. حسن شفیعی ۲۱ آذر ۱۳۹۸

      سلام. خوشحالیم که مفید واقع شده.
      در این صفحه مدیاکویری های استاندارد قرار گرفته :
      https://css-tricks.com/snippets/css/media-queries-for-standard-devices
      موفق باشید.

      پاسخ
دوره های آموزشی

آموزش افزایش امنیت وردپرس
با راهکارهای عملی

مناسب وبمسترها و صاحبان کسب و کار آنلاین

تخفیف 50درصدی
فقط 32.500 تومان
همین الان می خرم!
close-link

می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

50% تخفیف ویژه
فقط 144 هزار تومان

برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
می خواهم طراحی سایت را یاد بگیرم
close-link