کوئری Media در CSS

معرفی انواع media در CSS2

قانون media@ ، معرفی شده در CSS2، امکان تعریف سبک مختلف برای انواع مختلف رسانه ها را فراهم کرد.

مثال: شما می توانید یک مجموعه ای از سبک برای صفحه نمایش کامپیوتر، یکی برای پرینتر، یکی برای دستگاه های دستی، یکی برای دستگاه های نوع تلویزیون و غیره ایجاد کنید.

متاسفانه این نوع رسانه ها هیچ وقت پشتیبانی زیادی از دستگاه ها، غیر از نوع رسانه های چاپی نداشتند.

معرفی کوئری Media در CSS3

کوئری Media در CSS3 CSS2 ایده های نوع رسانه ای را گسترش داد: به جای جستجوی یک نوع دستگاه، آنها به قابلیت دستگاه نگاه می کنند.

کوئری Media می تواند برای بررسی بسیاری از موارد، از جمله:

  • عرض و ارتفاع نمایشگر
  • عرض و ارتفاع دستگاه
  • جهت گیری (آیا تبلت / تلفن در حالت افقی یا عمودی است؟)
  • وضوح

با استفاده از پرس و جو های رسانه ای یک روش محبوب برای ارائه یک ورق سبک مناسب به دسکتاپ، لپ تاپ، قرص و تلفن های همراه (مانند تلفن های آیفون و آندروید) است.

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

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

ویژگی
@media
21.0
9.0
3.5
4.0
9.0

 

ساختار کوئری Media

 

کوئری Media شامل نوع Media است و می تواند شامل یک یا چند عبارات، که به درستی یا نادرست حل شود.

@media not|only mediatype and (expressions) {
CSS-Code;
}

نتیجه کوئری درست است اگر نوع Media مشخص شده مطابق با نوع دستگاه سند نمایش داده شده است و تمام عبارات در کوئری Media درست است. هنگامی که کوئری Media درست است، قوانین style مربوطه یا قوانین اعمال می شود،

مگر اینکه از اپراتورهای نه تنها و یا تنها استفاده کنید، نوع رسانه ها اختیاری است و تمام نوع به صورت ضمنی خواهد بود.

شما همچنین می توانید سبک های مختلف برای رسانه های مختلف داشته باشید:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

انواع media

مقدار
شرح
all
مورد استفاده برای تمام دستگاه های نوع media است
print
مورد استفاده برای پرینترها
screen
مورد استفاده برای صفحه نمایش کامپیوتر، تبلت، تلفن های هوشمند و غیره
speech
مورد استفاده برای صفحه نمایشهایی است که "صفحه" را با صدای بلند میخواند

 

مثال ساده کوئری Media

مثال زیر رنگ پسزمینه را به نور سبز تغییر می دهد اگر دید 480 پیکسل عرض یا وسیع تر باشد (اگر نمای دید کمتر از 480 پیکسل باشد، پس زمینه رنگ صورتی خواهد بود):

Media
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
مشاهده مثال

مثال زیر منو را نشان می دهد که به سمت چپ صفحه نمایش داده می شود اگر عرض نمایش 480 پیکسل عرض یا وسیع تر باشد (اگر دیدگاه کمتر از 480 پیکسل باشد، این منو در بالای محتوا قرار می گیرد):

مثال media
@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left: 216px;}
}
مشاهده مثال

 

نظر شما

یادگیری CSS یادگیری CSS

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز