طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

آموزش مدیا کوئری در 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 خواهد بود اگر که نوع مدیا با نوع مشخص شده در مدیا کویری یکسان باشد و با نوع دیوایس مطابقت داشته باشد, پس تمام دستورات داخل بلاک آن اجرا می شود و استایل مربوطه روی دیوایس اعمال می شود

حتما بخوانید  آموزش CSS – بخش آخر (متفرقه)

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

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

 

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

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

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

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

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

حتما بخوانید  آموزش CSS - سلکتور CSS

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

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

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

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

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

 

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

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

موفق باشید.

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

دیدگاه کاربران

avatar

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه

تخفیف 150 هزار تومانی برای سورس فروشگاهی دیجی کالا تا پایان خردادماه - کد تخفیف : np150
ثانیه
دقیقه
ساعت
روز
خرید محصول