مدیا کوئری در طراحی واکنش گرای CSS
مدیا کوئری چیست؟
مدیا کوئری(media query)، یک تکنیک CSS است که در CSS3 معرفی شده است.
مدیا کوئری ها از قاعده ی media@ استفاده می کنند تا در صورتی که یک عبارت شرطی true باشد، یک قطعه کد از خصوصیات CSS به کدهای ما اضافه شوند.
مثال (مدیا کوئری در طراحی واکنش گرای CSS)
در صورتی که اندازه ی پنجره ی مرورگر، کوچکتر از 500px باشد، رنگ پس زمینه به رنگ lightblue در می آید:
body {
background-color: lightblue;
}
}
اضافه کردن نقطه ی شکست(breakpoint)
در آموزش های قبلی، یک صفحه وب یک صفحه وب واکنشگرا را با استفاده از سطر ها و ستون ها ایجاد کردیم اما در صفحه های نمایش کوچک به خوبی نمایش داده نمی شد. برای حل این مشکل می توانیم از مدیا کوئری ها استفاده کنیم. مثلا می توانیم یک نقطه ی شکست را مشخص کنیم به طوری که بخش های مختلف طراحی ما هنگام رسیدن به این نقطه ی شکست، به طور متفاوتی عمل کنند.
در مثال زیر از یک مدیا کوئری استفاده می کنیم و یک نقطه ی شکست را به اندازه ی 768px ایجاد می کنیم:
مثال (مدیا کوئری در طراحی واکنش گرای CSS)
هنگامی که صفحه ی نمایش(پنجره ی مرورگر) کوچکتر از 768px می شود، عرض هر یک از ستون ها را برابر با 100% می کنیم:
.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)
[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):
[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="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) نمایش داده می شود:
body {
background-color: lightblue;
}
}
- نوشته شده توسط احسان عباسی
- بازدید: 16410
دیدگاه‌ها
سلام من می خوام در مدیا کوئری به جای اینکه عناصر از چپ به راست پشت سرهم چیده بشه از راست به چپ بشه امکانش هست؟
سلام، بصورت زیر عمل کنید:
* {
box-sizing: border-box;
direction:rtl;
}
[class*="col-"] {
float: right;
padding: 15px;
}
ببخشید مثال دوم!
سلام خسته نباشید
مثال اول اشتباست.کلا یچیز دیگست
سلام . ممنون اصلاح شد.