مدیا کوئری – لیست سایز های پرکاربرد
مدیا کوئری – لیست سایز های پرکاربرد
مدیا کوئری چیست؟
مدیا کوئری یا media query به طراحان وب این امکان را می دهد که قالب را بر اساس مشخصات دستگاه نمایش دهنده وب سایت تغییر دهند (مشخصاتی از قبیل پهنا، ارتفاع، رنگ و…).
مدیا کوئری ها عباراتی هستند که از دو بخش تشکیل می شوند، بخش اول نوع دستگاه و بخش دوم مشخصات دستگاه را بررسی می کند. اگر حاصل عبارت درست یا TRUE باشد استایل مربوط به مدیا کوئری که درون {} قرار دارد اجرا می شود و اگر حاصل عبارت غلط یا FALSE باشد از مدیا کوئری صرف نظر می شود.
مدیا کوئری ها چه نوع دستگاههایی را شناسایی می کنند؟
- print -پرینترها
- screen – مانیتورها، تبلتها و گوشی های موبایل
- speech – برای دستگاههایی که متن صفحه را به صدا تبدیل می کنند
اگر بخواهید استایل شما در همه دستگاهها اعمال شود باید بجای نوع دستگاه از all استفاده کنید.
مدیا کوئری ها دستگاههای دیگری مانند braille، projection، tv و… را نیز پشتیبانی میکنند اما توصیه شده است که از آنها استفاده نکنید.
در مدیا کوئری ها می توان از کدام عملگرها استفاده کرد؟
- not اگر حاصل عبارت غلط باشد مدیا کوئری اعمال می شود
- only این عملگر باعث اعمال نشدن دستورات مدیا کوئری در مرورگرهای قدیمی می شود
- and اگر حاصل دو طرف این عملگر درست باشد مدیا کوئری اعمال می شود
برخی از ویژگی های رسانه که مدیا کوئری از آنها پشتیبانی می کند
- color
- color-index
- device-height
- device-width
- height
- max-height
- min-height
- width
- max-width
- min-width
- و…
مدیا کوئری ها چه کاربردی در طراحی قالب ریسپانسیو دارند؟
در واقع مدیا کوئری ها هستند که امکان طراحی قالب ریسپانسیو را فراهم کرده اند و بدون مدیا کوئری ها نمی توان یک قالب واکنشگرای حرفه ای طراحی کرد. کافی است نحوه استفاده از max-width و min-width را به خوبی یاد بگیرید تا بتوانید قالب را در دستگاههایی با ابعاد مختلف به خوبی نمایش دهید.
در آینده یک مقاله آموزشی کامل در مورد طراحی قالب ریسپانسیو منتشر خواهیم کرد.
/* ================================================ */
/* Responsive – Media queries */
/* Based on: */
/* http://lab.maltewassermann.com/viewport-resizer/ */
/* ================================================ */
/* ============================================== */
/* HDTV */
/* 1920×1080 */
/* ============================================== */
@media screen and (min-width: 1080px) and (max-width: 1920px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
/* ============================================== */
/* Widescreen */
/* 1280×800 */
/* ============================================== */
@media screen and (min-width: 800px) and (max-width: 1280px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
/* ============================================== */
/* Twitter Bootstrap */
/* 980x */
/* ============================================== */
@media screen and (min-width: 980px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
/* ============================================== */
/* Twitter Bootstrap */
/* x979 */
/* ============================================== */
@media screen and (max-width: 979px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
/* ============================================== */
/* iPad Landscape & Portrait */
/* 1024×768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
/* ============================================== */
/* iPad Landscape */
/* 1024×768 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
/* ============================================== */
/* iPad Portrait */
/* 768×1024 */
/* ============================================== */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
/* ============================================== */
/* Small Tablet Landscape/Portrait */
/* 800×600 */
/* ============================================== */
@media screen and (min-width: 600px) and (max-width: 800px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
/* ============================================== */
/* iPhone5/Android landscape (& narrow browser) */
/* 568×320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:568px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
/* ============================================== */
/* iPhone4/Android landscape (& narrow browser) */
/* 480×320 */
/* ============================================== */
@media screen and (min-width: 320px) and (max-width:480px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
/* ============================================== */
/* iPhone4/Android portrait 320×480 */
/* iPhone5 portrait 320×568 */
/* ============================================== */
@media screen and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
/* ============================================== */
/* Smaller devices */
/* Android Landscape 320×240 */
/* ============================================== */
@media screen and (min-width:240px) and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
/* ============================================== */
/* Smaller devices */
/* Android Portrait 240×320 */
/* ============================================== */
@media screen and (max-width:240px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}
نظر بدهید