اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › CSS3 › رول media@ در CSS

رول media@ در CSS

@media at-rule

عناصر مرتبط: 
@import

media@ در CSS به عنوان بخشی از ساختارِ استایل های CSS تلقی می شود. توسط این rule می توان بر حسب رسانۀ ارائه محتوا (مثل دستگاهای تصویری دیجیتال یا پرینتر) و یا تنظیماتی مبتنی بر اندازه مشخصی از مرورگر، استایل های CSS مورد نظر را به عناصرِ مشخص اعمال کرد.

نحوه نوشتار

@media (max-width: 568px) {
   p {
      color: orange;
      font-size: 13px;
   }
}
@media screen and (min-with: 996px) {
    section {
       background-color: lightgreen;
       padding: .5rem 1rem;
       margin-top: 15px;
    }
}

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

استفاده از media query (مدیا کوئری) به عنوان یک تکنیک رایج در طراحی ریسپانسیو وب بشمار می رود. همچنین توسط آن می توانید استایل های مشخصی را برای انواع مختلفی از رسانه خروجی را در نظر گرفت.

انواع مدیا

all​

برای انواع مدیا استفاده می شود. این مقدار پیشفرض است.

print​

برای پرینترها استفاده می شود.

screen​

برای کامپیوترها، تبلت ها و تلفنهای هوشمند استفاده می شود.

/* رنگ پس زمینه در پرینت قرمز میشود */
@media print {
   body {
      background-color: red;
   }
}

/* رنگ پس زمینه در دستگاه های تصویری و هوشمند قرمز میشود */
@media screen {
   body {
      background-color: red;
   }
}

با استفاده از کلیدواژه and میتوان ترکیبی از امکانهای مختلف را ایجاد کرد. در مثال زیر اگر عرض مرورگر بین 350px و 550px باشد، رنگ پس زمینه آبی می شود.

@media (min-width: 350px) and ( max-width: 550px ) {
   body {
      backgoround-color: blue;
   }
}

min-width و max-width

min-width حداقل عرض مرورگر را مشخص می کند. بدین ترتیب استایل های CSS تنها در صورتی به عناصر مورد نظر اعمال خواهند شد که عرض مرورگر بیشتر از مقدار داده شده به min-width باشد.

@media (min-width: 768px) {
   .container {
       padding: 15px 45px;
   }
}

max-width نیز حداکثرِ عرض مرورگر را مشخص می کند. بدین ترتیب٬ استایل های CSS تنها در صورتی به عناصر مورد نظر اعمال خواهند شد که عرض مرورگر کمتر از مقدار داده شده به max-width باشد.

@media (max-width: 768px) {
   .container {
       padding: 15px 45px;
   }
}

پشتیبانی مرورگرها
تمام مرورگرها از این at-rule پشتیبانی می کنند.

برچسب: CSS at-rule
پست قبلی

رول keyframes@ در CSS

پست بعدی

ویژگی align-content در CSS

پست بعدی
css-align-content-property

ویژگی align-content در CSS

دیدگاهتان را بنویسید لغو پاسخ

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

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

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

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن