آموزش نمایش داده های رسانه ای CSS – نمونه هایی

14 جولای 2021

سeriesالات رسانه CSS – مثالهای بیشتر

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

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

مثال

/* Set the background color of body to tan */
body {
  background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

آیا تعجب می کنید که چرا ما دقیقاً از 992px و 600px استفاده می کنیم؟ آنها همان مواردی هستند که ما آنها را “نقطه شکست معمول” برای دستگاه ها می نامیم. می توانید اطلاعات بیشتر در مورد نقاط شکست معمول را در آموزش طراحی وب پاسخگو بخوانید .


نمایش داده شد رسانه برای منوها

در این مثال ، از کوئری های رسانه برای ایجاد یک منوی ناوبری پاسخگو استفاده می کنیم که از نظر طراحی در اندازه های مختلف صفحه متفاوت است.

صفحه نمایش های بزرگ:

مثال

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

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

یک استفاده معمول از نمایش داده های رسانه ای ، ایجاد یک طرح انعطاف پذیر است. در این مثال ، ما یک چیدمان ایجاد می کنیم که بسته به اندازه صفحه نمایش مختلف ، بین چهار ستون و دو ستون با عرض کامل متفاوت است:

مثال

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

نکته: یک روش مدرن تر برای ایجاد طرح بندی ستون ، استفاده از CSS Flexbox است (به مثال زیر مراجعه کنید). با این حال ، در Internet Explorer 10 و نسخه های قبلی پشتیبانی نمی شود. اگر به پشتیبانی از IE6-10 نیاز دارید ، از شناورها استفاده کنید (همانطور که در بالا نشان داده شده است).

مثال

/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}

پنهان کردن عناصر با درخواستهای رسانه

یکی دیگر از کاربردهای متداول س quالات رسانه ، پنهان کردن عناصر در اندازه های مختلف صفحه است:

من در صفحه های کوچک پنهان خواهم شد.

مثال

/* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

تغییر اندازه قلم با SMediaالات مدیا

همچنین می توانید از کوئری های رسانه برای تغییر اندازه قلم یک عنصر در اندازه های مختلف صفحه استفاده کنید:

اندازه قلم متغیر

مثال

/* If screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}

/* If screen size is 600px wide, or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

گالری تصاویر انعطاف پذیر

در این مثال ، ما از کوئری های رسانه به همراه flexbox برای ایجاد گالری عکس پاسخگو استفاده می کنیم:

مثال


وب سایت انعطاف پذیر

در این مثال ، ما از کوئری های رسانه به همراه flexbox برای ایجاد یک وب سایت پاسخگو استفاده می کنیم ، حاوی یک نوار ناوبری انعطاف پذیر و محتوای انعطاف پذیر.

مثال


جهت گیری: پرتره / منظره

از کوئری های رسانه نیز می توان برای تغییر طرح بندی یک صفحه بسته به جهت مرورگر استفاده کرد.

شما می توانید مجموعه ای از ویژگی های CSS را داشته باشید که فقط درصورتی که پنجره مرورگر از ارتفاع آن گسترده تر باشد ، جهت به اصطلاح “Landscape” اعمال می شود:

مثال

اگر جهت در حالت افقی است ، از رنگ زمینه آبی روشن استفاده کنید:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

حداقل عرض تا حداکثر عرض

همچنین می توانید از مقادیر برای تنظیم حداقل عرض و حداکثر عرض استفاده کنید.(max-width: ..) and (min-width: ..)

به عنوان مثال ، وقتی عرض مرورگر بین 600 تا 900px است ، شکل عنصر <div> را تغییر دهید:

مثال

@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

استفاده از یک مقدار اضافی: در مثال زیر ، ما با استفاده از ویرگول یک کوئری رسانه اضافی به سوال موجود خود اضافه می کنیم (این کار مانند یک عملگر OR خواهد بود):

مثال

/* When the width is between 600px and 900px OR above 1100px - change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

منبع

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

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

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

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

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

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

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

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

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

0 دیدگاه

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

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