سبد (0)

مدیا کوئری در طراحی واکنش گرای CSS

مدیا کوئری چیست؟

مدیا کوئری(media query)، یک تکنیک CSS است که در CSS3 معرفی شده است. 

مدیا کوئری ها از قاعده ی media@ استفاده می کنند تا در صورتی که یک عبارت شرطی true باشد، یک قطعه کد از خصوصیات CSS به کدهای ما اضافه شوند. 

مثال (مدیا کوئری در طراحی واکنش گرای CSS)

 در صورتی که اندازه ی پنجره ی مرورگر، کوچکتر از 500px باشد، رنگ پس زمینه به رنگ lightblue در می آید: 

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
   
}
}
خودتان امتحان کنید »

اضافه کردن نقطه ی شکست(breakpoint)

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

 

در مثال زیر از یک مدیا کوئری استفاده می کنیم و یک نقطه ی شکست را به اندازه ی 768px ایجاد می کنیم:

مثال (مدیا کوئری در طراحی واکنش گرای CSS)

هنگامی که صفحه ی نمایش(پنجره ی مرورگر) کوچکتر از 768px می شود، عرض هر یک از ستون ها را برابر با 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 خود را مقداری تغییر دهیم. به جای اینکه وقتی عرض ما کوچکتر از 768px شد، استایل های خود را تغییر دهیم، باید هنگامی که عرض ما بیشتر از 768px شد طراحی و استایل خود را تغییر دهیم. یعنی ابتدا برای موبایل ها طراحی کنیم و سپس برای لپ تاپ ها و تبلت ها طراحی کنیم. به این روش، پاسخ گرا به موبایل(Mobile First) گفته می شود. 

مثال (مدیا کوئری در طراحی واکنش گرای 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%;}
}
خودتان امتحان کنید »

 


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

شما می توانید هر تعداد نقطه ی شکست که بخواهید را اضافه کنید. 

در اینجا ما قصد داریم یک نقطه ی شکست دیگر، بین تبلت ها و موبایل ها، اضافه کنیم.

 

برای انجام این کار، از یک مدیا کوئری دیگر( در نقطه ی 600px) استفاده می کنیم و کلاس های جدیدی را برای دستگاه های بزرگتر از 600px(و کوچکتر از 768px) تنظیم می کنیم:

مثال (مدیا کوئری در طراحی واکنش گرای CSS)

توجه کنید که هردوی این مجموعه کلاس ها، با یکدیگر یکسان هستند با این تفاوت که از نمای متفاوت برای آنها استفاده شده است(-col و -col-m):

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* 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: 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

برای رایانه های رومیزی:

در خط اول و سوم از کدهای زیر، div اول و div سوم، به اندازه ی 3 ستون گسترش می یابند. اما div دوم به اندازه ی 6 ستون گسترش می یابد.

برای تبلت ها:

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

 

 

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

 


 تشخیص جهت: عمودی یا افقی

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

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

 

مثال (مدیا کوئری در طراحی واکنش گرای CSS)

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

 

@media only screen and (orientation: landscape) {
    body {
        background-color: lightblue;
   
}
}
خودتان امتحان کنید »

آموزش صوتی CSS

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه