مدیا کوئری چیست؟
مدیا کوئری (Media Query) تکنیکی در CSS است که در CSS3 معرفی شد.
این تکنیک از قانون @media استفاده می‌کند تا یک بلاک از ویژگی‌های CSS را فقط زمانی اعمال کند که یک شرط خاص درست باشد.
مثال:
اگر عرض پنجره مرورگر 600px یا کمتر باشد، رنگ پس‌زمینه آبی روشن می‌شود:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}افزودن نقطه شکست (Breakpoint)
در آموزش قبلی، ما یک صفحه وب با ردیف‌ها و ستون‌ها ایجاد کردیم که واکنش‌گرا بود، اما در صفحه نمایش کوچک خوب به نظر نمی‌رسید.
مدیا کوئری‌ها (Media Queries) می‌توانند به بهبود این مشکل کمک کنند. می‌توانیم یک نقطه شکست (Breakpoint) اضافه کنیم که در آن قسمت‌هایی از طراحی به صورت متفاوت در هر طرف نقطه شکست رفتار کنند.
مثال:
زمانی که عرض صفحه (پنجره مرورگر) کمتر از 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) {
/* برای موبایل: */
[class*="col-"] {
width: 100%;
}
}طراحی برای موبایل اول (Mobile First)
موبایل اول به این معناست که ابتدا برای موبایل طراحی کنیم و سپس برای دسکتاپ یا هر دستگاه دیگری طراحی کنیم. این کار باعث می‌شود صفحه در دستگاه‌های کوچک‌تر سریع‌تر بارگذاری شود.
به جای تغییر استایل‌ها وقتی که عرض کمتر از 768px می‌شود، باید طراحی را طوری تغییر دهیم که وقتی عرض بیشتر از 768px شد، تغییرات اعمال شود. این کار طراحی موبایل اول را پیاده‌سازی می‌کند:
مثال:
/* برای موبایل: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* برای دسکتاپ: */
.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%;}
}نقطه شکست دیگر (Another Breakpoint)
شما می‌توانید هر تعداد نقطه شکست (Breakpoint) که می‌خواهید اضافه کنید.
همچنین می‌توانیم یک نقطه شکست بین تبلت‌ها و موبایل‌ها اضافه کنیم:
مثال:
/* برای موبایل: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* برای تبلت‌ها: */
.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) {
/* برای دسکتاپ: */
.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%;}
}نقاط شکست معمولی دستگاه‌ها (Typical Device Breakpoints)
برای ساده کردن کار، می‌توانید روی پنج گروه اصلی هدف‌گذاری کنید:
مثال:
/* دستگاه‌های خیلی کوچک (موبایل‌ها، 600px و کمتر) */
@media only screen and (max-width: 600px) {...}
/* دستگاه‌های کوچک (تبلت‌ها در حالت پرتره و موبایل‌های بزرگ، 600px و بیشتر) */
@media only screen and (min-width: 600px) {...}
/* دستگاه‌های متوسط (تبلت‌ها در حالت لنداسکیپ، 768px و بیشتر) */
@media only screen and (min-width: 768px) {...}
/* دستگاه‌های بزرگ (لپ‌تاپ‌ها/دسکتاپ‌ها، 992px و بیشتر) */
@media only screen and (min-width: 992px) {...}
/* دستگاه‌های خیلی بزرگ (لپ‌تاپ‌ها و دسکتاپ‌های بزرگ، 1200px و بیشتر) */
@media only screen and (min-width: 1200px) {...}تغییر اندازه فونت با مدیا کوئری (Change Font Size With Media Queries)
می‌توانید از مدیا کوئری‌ها برای تغییر اندازه فونت یک عنصر در اندازه‌های مختلف صفحه استفاده کنید:
مثال:
/* اگر اندازه صفحه 601px یا بیشتر باشد، اندازه فونت div را به 80px تنظیم کنید */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
/* اگر اندازه صفحه 600px یا کمتر باشد، اندازه فونت div را به 30px تنظیم کنید */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام