رسپانسیو رسانه ای CSS

طرح رسپانسیو رسانه ای CSS: تنظیم نقاط شکست CSS

پرسشها و نقاط شکست رسانه CSS برای ایجاد طرحهای رسانه ای پاسخگو است که باعث می شود صفحه آرایی ها با صفحه های مختلف سازگار شوند.

استفاده از کوئری های رسانه

سوالات رسپانسیو رسانه ای CSS برای توسعه طرح های رسانه پاسخگو است. آن ها به شما امکان می دهند نحوه مشاهده وب سایت ها در صفحه های مختلف را کنترل کنید.

این مثال بر اساس ابعاد اندازه خاص دستگاه های تلفن همراه (992 پیکسل برای تبلت ها و 600 پیکسل برای تلفن ها) رنگ پس زمینه را تغییر می دهد:

/* The background color is set to green */
body {
  background-color: lightgreen;
}

/* When a screen is 992px or smaller, the background color will be pink */
@media screen and (max-width: 992px) {
  body {
    background-color: pink;
  }
}

/* When a screen is 600px or smaller, the background color will be blue */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

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

CSSmedia at-rule ویژگی های خاص CSS را برای استایل دادن به وب سایتها فقط در صورت تحقق شرایط تنظیم می کند. به عنوان مثال ،media می تواند نشان دهد که هنگام بارگیری صفحات در دستگاه های تلفن همراه ، رایانه لوحی ، رایانه رومیزی یا لپ تاپ ، طرح تغییر می کند.

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

/* Create two unequal columns */
/* Sidebar/left column */
.sidecol {
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
}

/* Main column */
.maincol {
    flex: 70%;
    background-color: white;
    padding: 20px;
}

چگونه یک قانونmedia بنویسیم

این مثال یک طراحی پاسخگو ساده را تنظیم می کند. وقتی صفحه به 600 پیکسل می رسد ، پاسخ می دهد. رنگ پس زمینه برای صفحه های کوچکتر تغییر می کند:

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

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

.navbar {
    overflow: hidden;
    background-color: lightgreen;
}

.navbar a {
    float: left;
    display: block;
    color: black;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
}

@media screen and (max-width: 600px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}

با استفاده از قانونmedia مرتبط با CSS با حداکثر عرض ، می توانیم با استفاده از ویژگی های مختلف شناور و عرض ، تراز بندی عناصر را تغییر دهیم:

@media screen and (min-width: 720px) and (max-width: 1079px) /* Four columns that float next to each other */
.column {
  float: left;
  width: 25%;
}

/* If a screen is 992px or less wide, keep two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

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

.row {
  display: flex;
  flex-wrap: wrap;
}

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

/* If a screen is 992px or less wide, keep two columns */
@media screen and (max-width: 992px) {
  .column {
    flex: 50%;
  }
}

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

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

@media screen and (min-width: 600px) {
    #leftsidebar {
        width: 220px; 
        float: right;
    }
    #main {
        margin-right: 250px;
    }
}

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

سوال رسانه شامل نوع رسانه و ویژگی رسانه است.

انواع رسانه ها دسته دستگاه ها را نشان می دهند و مقادیر زیر را دارند:

• همه: برای همه دستگاه ها مناسب است.
• print: برای داده های ارائه شده در حالت پیش نمایش چاپ مناسب است.
• صفحه نمایش: در درجه اول برای صفحه نمایش مناسب است.
• سخنرانی: مناسب برای ترکیب کننده های گفتار.

ویژگی های رسانه عبارت های اختیاری هستند که نشان می دهد آیا در یک صفحه یافت می شوند. در اینجا برخی از مقادیر مشترک ذکر شده است:

• width: عرض هدفمندی منطقه نمایش را تنظیم می کند.
• height: ارتفاع هدفمند منطقه نمایش را تنظیم می کند.
• جهت گیری: جهت گیری هدفمند دستگاه ها را تنظیم می کند.
• وضوح: وضوح هدفمند دستگاه خروجی را تنظیم می کند.

اپراتورهای منطقی

با استفاده از عملگرهای منطقی و فقط و نه ، می توانید پرس و جوهای پیشرفته رسانه CSS ایجاد کنید. توسعه دهندگان چندین پرسش رسانه را با جدا کردن آنها با ویرگول ترکیب می کنند.

• and: چندین ویژگی رسانه را ترکیب می کند. هر دو باید درست باشند.
• only: فقط درصورتی که کل پرسش مطابقت داشته باشد از ویژگی های یک ظاهر استفاده می کند.
• not: هنگامی که پاسخ باید نادرست باشد ، یک پرسش رسانه را با ارائه درست رد می کند.

نقاط شکست برای دستگاه ها و محتوا

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

در این مثال ، نقطه شکست را با 768 px اضافه می کنیم:

/* Design 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) {
    /* Design for mobile */
    [class*="col-"] {
        width: 100%;
    }
}

برای تنظیم چیدمان و شکل ظاهری وب سایت با توجه به دستگاه ، نقاط انعطاف پذیر CSS وجود دارد.

نکته: توسعه دهندگان دیگر نقاط توقف مبتنی بر دستگاه را توصیه نمی کنند زیرا منجر به کد طولانی و نیاز مستمر به به روزرسانی ها (هنگامی که دستگاه های جدید ظاهر می شوند) می شوند.

گزینه بهتر این است که نقاط تقسیم مبتنی بر محتوا را اضافه کنید تا مکانی را در محتوای خود نشان دهید که باید به تغییرات صفحه نمایش پاسخ دهد.

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

برای پاسخگو بودن گالری تصاویر ، باید از ترکیبی از ویژگی های یک ظاهر طراحی شده CSS مانند flex ، Align-Align و Max-عرض استفاده کنید.

در مثال ما ، چهار ستون اصلی در کوچکترین صفحات به دو ستون یا حتی یک ستون تبدیل می شوند:

/* Four equal columns */
.column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
   vertical-align: middle;
}

/* If a screen is 800px or less wide, keep two columns */
@media screen and (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

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

استفاده از عرض حداقل یا حداکثر

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

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

در بعضی موارد ، هنگامی که ابعاد صفحه بسیار خاص هستند – بیشتر از x و کمتر از y – یک عنصر باید تغییر شکل دهد. اختصاص

@media screen and (max-width: 950px) and (min-width: 625px) {
  div.example {
    font-size: 45px;
    padding: 55px;
    border: 6px solid yellow;
    background: lightgrey;
  }
}

همیشه ابتدا برای دستگاه های تلفن همراه طراحی کنید

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

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

@media only screen and (min-width: 769px) {
    /* Design 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%;}
}

وقتی عرض از 768px بزرگتر باشد ، طراحی وب را تغییر می دهیم. بنابراین عرض دقیقه باید 769 پیکسل باشد. این نقطه شکست مشخصه رویکرد همراه اول است.

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

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

/* For devices with width of 480px and less, like phones */
@media only screen and (max-width: 480px) {...} 

/* For devices with width between 481px and 768px, like larger phones and portrait tablets */
@media only screen and (min-width: 481px) {...} 

/* For devices with width between 769px and 1279px, like landscape tablets and laptops */
@media only screen and (min-width: 769px) {...} 

/* For devices with width of 1280px and more, like desktop computers */
@media only screen and (min-width: 1280px) {...}

این مثال یک پرس و جو CSSmedia (در 481 پیکسل) اضافه می کند و کلاسهای جدیدی را برای صفحه بزرگتر از 480 پیکسل و کوچکتر از 769 پیکسل تعریف می کند:

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

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

@media only screen and (min-width: 769px) {
    /* Design 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 می تواند تصمیم بگیرد که ستونها چگونه به هر نقطه شکست واکنش نشان می دهند.

<div class="row">
   <div class="col-4 col-m-4">...</div>
   <div class="col-7 col-m-10">...</div>
   <div class="col-4 col-m-13">...</div>
</div>

جهت گیری: پرتره در مقابل منظره

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

این مثال برای تغییر رنگ پس زمینه هنگامی که صفحه نمایش منظره است ، این مثال را نشان می دهد:

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

عناصر پنهان

در هنگام صحت معیارهای خاص ، پرس و جوهای رسانه CSS می توانند عناصر را پنهان کنند.

کاربران وب موبایل وقت بیشتری را برای یافتن اطلاعات در صفحه های کوچک صرف می کنند. با پنهان کردن عناصر غیر ضروری می توانید به آنها کمک کنید تا تجربه بهتری داشته باشند.

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

@media only screen and (max-width: 600px) { /* The element will be hidden if the screen is 600px wide or less */
  div.example {
    display: none;
  }
}

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

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

برای یادگیری استفاده از ویژگی font-size همراه با قانون media و عرض CSS ، مثال زیر را بررسی کنید.

@media only screen and (min-width: 481px) { /* Font size of div elements will be 70px when the screen is 481px or wider */
   div.example {
      font-size: 70px;
   }
}

@media only screen and (max-width: 480px) { /* If the screen is 480px or less, the font of div elements will be 25px */
   div.example {
      font-size: 25px;
  }
}

نکات مهم رسپانسیو رسانه ای CSS:

• انواع رسانه ها مانند تلویزیون ، بریل و شنیداری منسوخ شده اند.
• گاهی اوقات ، استفاده از CSSmedia لازم نیست. بسیاری از جنبه های پاسخگو را می توان با مولفه های Flexbox و Grid به دست آورد.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.