٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

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

CSS2 انواع رسانه ها را معرفی کرد این @mediaقانون که در CSS2 معرفی شد ، امکان تعریف قوانین سبک متفاوت برای انواع مختلف رسانه ها را فراهم کرد. مثالها: شما می توانید یک مجموعه از قوانین سبک برای صفحه های رایانه…

محمد یوسفی

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;}
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها