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

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

آموزش طراحی وب پاسخگو – سوالات رسانه

پرسش رسانه چیست؟ پرس و جو رسانه یک روش CSS است که در CSS3 معرفی شده است. این @mediaقانون فقط در صورت صحت یک شرط خاص از بلوک از ویژگی های CSS استفاده می کند. مثال اگر پنجره مرورگر 600 پیکسل…

محمد یوسفی

16 جولای 2021

پرسش رسانه چیست؟

پرس و جو رسانه یک روش CSS است که در CSS3 معرفی شده است.

این @mediaقانون فقط در صورت صحت یک شرط خاص از بلوک از ویژگی های CSS استفاده می کند.

مثال

اگر پنجره مرورگر 600 پیکسل یا کوچکتر باشد ، رنگ پس زمینه آبی روشن خواهد بود:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

یک Breakpoint اضافه کنید

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

سeriesالات رسانه می تواند در این زمینه کمک کند. ما می توانیم یک نقطه شکست اضافه کنیم که در آن قسمتهای خاصی از طراحی در هر طرف نقطه شکست متفاوت عمل کنند.

برای افزودن نقطه انفصال در 768 پیکسل از یک پرس و جو رسانه استفاده کنید:

مثال

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

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

همیشه ابتدا برای موبایل طراحی کنید

Mobile First به معنای طراحی برای موبایل قبل از طراحی برای دسک تاپ یا هر وسیله دیگری است (این باعث می شود صفحه در دستگاه های کوچکتر سریعتر نمایش داده شود).

این بدان معنی است که ما باید برخی تغییرات را در CSS خود ایجاد کنیم.

به جای تغییر سبک ها وقتی که عرض از 768px کوچکتر شد ، ما باید وقتی که عرض از 768px بزرگتر شود طرح را تغییر دهیم . این باعث می شود که ابتدا Mobile ما طراحی شود:

مثال

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

نقطه شکست دیگر

می توانید به همان اندازه که می خواهید نقطه انفصال ایجاد کنید.

ما همچنین یک نقطه انفصال بین تبلت ها و تلفن های همراه قرار خواهیم داد.

ما این کار را با اضافه کردن یک جستجوی رسانه دیگر (با سرعت 600 پیکسل) و مجموعه ای از کلاس های جدید برای دستگاه های بزرگتر از 600 پیکسل (اما کوچکتر از 768 پیکسل) انجام می دهیم:

مثال

توجه داشته باشید که دو مجموعه کلاس تقریباً یکسان هستند ، تنها تفاوت در نام ( col-و col-s-) است:

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

ممکن است عجیب به نظر برسد که ما دو مجموعه کلاس یکسان داریم ، اما به ما این فرصت را می دهد تا در HTML تصمیم بگیریم که در مورد ستون ها در هر نقطه شکست چه اتفاقی می افتد:

مثال HTML

برای دسک تاپ:

بخش اول و سوم هر کدام 3 ستون را شامل می شوند. بخش میانی 6 ستون است.

برای قرص:

بخش اول به 3 ستون باز می شود ، قسمت دوم به 9 ستون باز می شود و قسمت سوم در زیر دو بخش اول نمایش داده می شود و 12 ستون را در بر می گیرد:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

نقاط شکست معمول دستگاه

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

مثال

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

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

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

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

مثال

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

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

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

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

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

مثال

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

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

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

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

مثال

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

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

منبع

مطالب مرتبط

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