cssطراحی سایت

جلسه ۶۸: طراحی رسپانسیو – تعریف مجدد مناطق شبکه با Media Queries در CSS

طراحی رسپانسیو - تعریف مجدد مناطق شبکه با Media Queries

مناطق شبکه ای که در محفظه شبکه اصلی ایجاد می کنید به صورت سنگی تنظیم نشده اند. مناطق شبکه را می توان بر اساس اندازه صفحه دستگاه کاربر تغییر داد. موارد زیر را بیان خواهیم کرد
  • ای وای! media@ چیست؟
  • Media Queries
  • جریان (جهت) پیش فرض یک شبکه
تصویر زیر نشان می دهد که هدف ما در نمایشگرهای موبایل چیست.

یا مورد خاص ما ، برخی از بازسازی ها را برای رویکرد اول تلفن همراه انجام خواهیم داد. تلفن همراه اول به سادگی استایل های پیش فرض شما را برای دستگاه های تلفن همراه ایجاد می کند. سپس ممکن است برای ایجاد تغییر در نمایشگرهای بزرگتر از media queries ها پیش بروید. بیایید کد فعلی موجود را تغییر دهیم. قسمت تعریف grid را در یک پرس و جو رسانه قرار دهید. مثل این:

@media only screen and (min-width: ۶۰۰px) { body { grid-template-columns: ۱۲۰px ۱fr; grid-template-areas: “sidebar  content” “footer   footer”; } }

ای وای! media@ چیست؟

آیا بیت کد بالا را دیدید؟ این یکی:

@media only screen and (min-width: ۶۰۰px)

بگذارید در این مورد توضیح دهم. اگر در طراحی های رسپانسیو تازه کار نیستید ، خیال خود را راحت کنید. من هنوز در بخش طراحی رسپانسیو این دوره کار می کنم. در حال حاضر ، بگذارید توضیح دهم که media querie چیست. در بخش طراحی رسپانسیو ، عدالت را در مورد درmedia querie و سایر مولفه های طراحی پاسخگو رعایت خواهیم کرد.

@media screen and (max-width: ۳۰۰px) { /*write your css in this code block*/

}

“برای یک دستگاه صفحه نمایش با حداکثر عرض ۳۰۰ پیکسل … این کار را انجام دهید” هر استایل درون بلوک کد فقط برای دستگاه هایی اعمال می شود که با بیان ، صفحه نمایش و (حداکثر عرض: ۳۰۰ پیکسل) مطابقت داشته باشند ، یعنی دستگاه های صفحه با حداکثر عرض ۳۰۰ پیکسل. من حدس می زنم که این کمک کرد تا برخی از سردرگمی ها پاک شود بازگشت به ساخت طرح موسیقی. باید پیش فرض ها را ازmedia query حذف کنید.

body { display: grid; grid-template-rows: ۱fr ۵۰px; }

چرا من "grid-template-rows: 1fr 50px" را ازmedia query حذف کرده ام؟ به این دلیل که صفحه نمایش موبایل و دسک تاپ تعریف ردیفی یکسانی دارند. ۲ ردیف اما در دستگاه های دسک تاپ ، یک نوار کناری وجود دارد. نوار کناری ۱۲۰px را در تعریف grid-template-column ها محاسبه می کند. با این حال ، نوار کناری در دستگاه های تلفن همراه وجود ندارد. بنابراین ، تعریف grid-template-column را برای تلفن همراه دوباره تعریف می کنیم. اکنون برای دستگاه های تلفن همراه ، ما این را به عنوان یک استایل پیش فرض قرار خواهیم داد. یعنی در هیچ media query بسته نشده است.

body { grid-template-areas: “content” “footer”

خیلی ساده است؟نه؟ بگذار توضیح بدهم.

جریان (جهت) پیش فرض grid

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

body { grid-template-areas: “content” “footer”

با این حال ، توجه داشته باشید که نیازی به تعیین grid-template-column نیست به طور پیش فرض ، یک کانتینر شبکه زیر دسته ها رو را در ردیف ها تراز می کند. بنابراین ، اعلامیه بالا محتوا را در امتداد یک ردیف ، و پاورقی را در امتداد دیگری تراز می کند. در زیر نتیجه آن آمده است – نوار کناری مخفی در تلفن همراه.

با مانع اولیه درک نحوه کار شبکه ها ، و راه اندازی شبکه رسپانسیو ، بیایید طرح برنامه را به پایان برسانیم!

<html>

 <head>

 </head>

 <body>

   <div class=”aside”></div>

   <div class=”main”></div>

   <div class=”footer”></div>

 </body>

</html>

/*===========
 basic reset
===========*/
body {
  margin: 0;
  padding: 0;
}
/*=============================
  default grid set up -> mobile first
===============================*/
body {
      display: grid;
      min-height: 100vh;
      min-width: 100%;
      grid-template-rows: 1fr 90px;
      grid-template-columns: 1fr;
      grid-template-areas: "content"
                           "footer"
}

.main {
  background-color: #2c3e50;
  grid-area: content;
}

.footer {
  background-color: #c0392b;
  grid-area: footer;
}
.aside {
  background-color: #7f8c8d;
  grid-area: sidebar;
}

/*=============================
  larger screens
===============================*/

@media only screen and (min-width:600px) {
  body {
    grid-template-columns: 40px 1fr;    
    grid-template-areas: "sidebar  content"
                           "footer  footer";
  }
}
برای دیدن رسپانسیو در عمل ، اندازه مرورگر خود را تغییر دهید و خروجی بالا را تماشا کنید. حتما برگه های زمین بازی بالا را نیز بررسی کنید.

نوشته های مشابه

دیدگاهتان را بنویسید

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

دکمه بازگشت به بالا