۱۵
آبان

جلسه ۶۶ : طراحی واکنش گرا با مدیا کوئری ( Media query ) در CSS

دسته‌بندی‌ها :

جزئیات
نوع مطلبآموزشی

فهرست

مقدمه

با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم. به موضوع آموزش استفاده از Media query در css ، بپردازیم. Media query از تکنیک های جدید css است که از css3 به بعد عرضه شده است. این ویژگی در واقع یک سری خصوصیات از css است، که دستورات تعیین شده ای را، در صورت درست بودن یک شرط خاص، عمل می کند.

در سری آموزشهای قبلی css ، به موضوعات مهم و کلیدی در css ، از جمله آموزشهای افکت گذاری کار با افکت های سایه در css ، کار با ویژگی Transitions در css و …را برای اعمال جلوه های ویژه و زیبا در قالب صفحات وب ارائه کردیم.

در بخش آموزشهای Responsive نیز ، به موضوعات استفاده از تنظیمات viewport در css و استفاده از grid-view در css ، پرداختیم. در ادامه این فصل آموزشی ، به موضوع مهم و کاربردی استفاده از Media query در css ، می پردازیم.

Media-query

استفاده از Media query در css

همانطور که گفته شد ، با استفاده از ویژگی Media query ، می توانیم تعیین کنیم در صورت درست بودن یک شرط اعمالی روی یک یا چند عنصر html اعمال شود.

مثال : در مثال زیر اگر اندازه پنجره مرورگر ۶۰۰ پیکسل یا کوچکتر باشد ، رنگ پس زمینه صفحه وب به آبی روشن تغییر می کند:

مثال : نمونه ای ساده از mediaquery

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

@media only screen and (max-width: 600px) {

body {

background-color: lightblue;

}

خودتان امتحان کنید »

افزودن نقاط توقف (breakpoint)

در آموزشهای قبلی یک صفحه وب با ردیف ها و ستون ها ایجاد کردیم و نتیجه خوب بود.

اما در یک صفحه کوچک ، خوب به نظر نمی رسید.

در این اینجا ما می توانیم از ویژگی Media query استفاده کنیم.

ما می توانیم با استفاده از این ویژگی یک نقطه پایانی (breakpoint) اضافه کنیم.

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

مثال: زمانی که اندازه مرورگر از ۷۶۸ پیکسل کوچکتر شود، عرض هر کدام از ستون ها، ۱۰۰ درصد شود:

مثال : ایجاد breakpoints

/* 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%;
    }
}

/* 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%;

}

خودتان امتحان کنید »

همیشه ابتدا برای صفحه موبایل طراحی را انجام دهید

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

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

این به این معنی است که باید تغییرات در مثال css قبلی اعمال کنیم:

مثال : طراحی اولیه برای موبایل

/* 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%;}
}

/* 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%;}

}

خودتان امتحان کنید »

افزودن breakpoint های بیشتر

برای سایر اندازه های صفحه نمایش (مانند تب لت ها) نیز باید تنظیمات Media query را اعمال کنید.

برای این منظور باید کلاس جدیدی با نام جدید برای دستگاههایی با اندازه صفحه بزرگتر از ۶۰۰ پیکسل ایجاد کنید.

مثال: علاوه بر کلاس ” -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%;}
}

/* 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 به ما کمک می کند.

مثال: در مثال زیر برای دسکتاپ بخش اول و سوم دارای ۳ه ستون و بخش میانی ۶ ستون را شامل می شود.

برای تب لت ، بخش اول ۳ ستون بخش میانی ۹ ستون ، و بخش پایانی ۱۲ ستون را در بر می گیرد:

مثال : طراحی برای دو دستگاه

<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>

</div>

خودتان امتحان کنید »

انواع breakpoint ها در دستگاههای مختلف

تعدا زیاد دستگاه با صفحه هایی با اندازه های مختلف وجود دارد ، بنابراین طراحی breakpoint برای هر کدام کار سختی است.

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

مثال : ایجاد انواع breakpoints

/* 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) {...}

/* 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) {...}

خودتان امتحان کنید »

تشخیص عمودی یا افقی بودن صفحه در Media query

Media query تغییر حالت عمودی یا افقی صفحه مرورگر را تشخیص می دهد. و شما می توانید برای این تغییر حالت نیز قانون تعریف کنید:

مثال:

مثال : تبدیل حالت orientation

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

@media only screen and (orientation: landscape) {

body {

background-color: lightblue;

}

خودتان امتحان کنید »

سایر مثال ها از کاربرد Media query

می توانید برای ویژگی های مختلف ، عناصر ، در Media query ، قوانین خاصی را تعریف کنید:

مثال ۱: مخفی کردن عناصر در Media query (اگر عرض ۶۰۰ پیکسل یا کمتر شود ، عنصر مخفی می شود):

مثال : مخفی کردن عناصر

@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

@media only screen and (max-width: 600px) {

div.example {

display: none;

}

خودتان امتحان کنید »

مثال ۲: تغییر دادن font size با Media query:

مثال : اندازه ی فونت متغییر

@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

@media only screen and (max-width: 600px) {

div.example {

font-size: 30px;

}

خودتان امتحان کنید »

QR: جلسه ۶۶ : طراحی واکنش گرا با مدیا کوئری ( Media query ) در CSS

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

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

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۶۶ : طراحی واکنش گرا با مدیا کوئری ( Media query ) در CSS

مقدمه

استفاده از Media query در css

افزودن نقاط توقف (breakpoint)

همیشه ابتدا برای صفحه موبایل طراحی را انجام دهید

افزودن breakpoint های بیشتر

انواع breakpoint ها در دستگاههای مختلف

تشخیص عمودی یا افقی بودن صفحه در Media query

سایر مثال ها از کاربرد Media query

لیست مطالب دوره

آموزش های پیشرفته CSS

گریدبندی در css

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ