آموزش سوالات رسانه CSS

14 جولای 2021

CSS2 انواع رسانه ها را معرفی کرد

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

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

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


CSS3 س Mediaالات رسانه ای را معرفی کرد

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

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

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

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


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

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


نحو پرس و جو رسانه

یک پرس و جو رسانه ای از یک نوع رسانه تشکیل شده است و می تواند شامل یک یا چند عبارت باشد که به دو حالت درست یا غلط تبدیل می شوند.

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

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

تا زمانی که از عملگرهای نه یا فقط استفاده نکنید ، نوع رسانه اختیاری است و allنوع آن ضمنی است.

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

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

انواع رسانه CSS3


الات رسانه مثالهای ساده

یکی از راه های استفاده از نمایش داده های رسانه ای داشتن یک بخش CSS جایگزین در داخل صفحه سبک است.

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

مثال

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

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

مثال

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

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

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.