Media Queries الأدوات التي تجعل موقعك يعمل بسلاسة على أي جهاز

مقدمة

في عالم التصميم الحديث، أصبح من الضروري أن تكون المواقع الإلكترونية متجاوبة مع جميع الأجهزة، سواء كانت أجهزة كمبيوتر مكتبية، أو أجهزة لوحية، أو هواتف ذكية. هنا يأتي دور Media Queries في CSS، وهي أداة قوية تسمح لك بتطبيق أنماط مختلفة بناءً على خصائص الجهاز مثل عرض الشاشة، الارتفاع، الاتجاه، والدقة.

ما هي Media Queries؟

Media Queries هي تقنية في CSS تسمح لك بتطبيق أنماط مختلفة بناءً على شروط معينة. هذه الشروط يمكن أن تكون:

عرض الشاشة (Width): مثل max-width وmin-width.
ارتفاع الشاشة (Height): مثل max-height وmin-height.
اتجاه الشاشة (Orientation): مثل portrait (عمودي) أو landscape (أفقي).
الدقة (Resolution): مثل min-resolution وmax-resolution.

تركيب Media Queries

الصيغة العامة لـ Media Queries هي:

@media [نوع الوسيط] and (شرط) {
    /* أنماط CSS */
}

أمثلة:

تغيير التصميم لعرض شاشة أقل من 768px (أجهزة محمولة): @media (max-width: 768px) { body { background-color: lightblue; } }
تغيير التصميم لعرض شاشة أكبر من 1024px (أجهزة كمبيوتر): @media (min-width: 1024px) { body { background-color: lightgreen; } }
تغيير التصميم بناءً على اتجاه الشاشة: @media (orientation: portrait) { body { font-size: 18px; } }

أنواع الوسائط (Media Types)

يمكنك تحديد نوع الجهاز الذي تريد تطبيق الأنماط عليه باستخدام أنواع الوسائط التالية:

all: جميع الأجهزة.
screen: الشاشات (أجهزة الكمبيوتر، الأجهزة اللوحية، الهواتف).
print: الطابعات.
speech: قارئات الشاشة (للمكفوفين).

مثال:

@media screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

خصائص الوسائط (Media Features)

هذه هي الخصائص التي يمكنك استخدامها في Media Queries:

width وmin-width وmax-width: تُستخدم للتحكم في عرض الشاشة. @media (min-width: 768px) and (max-width: 1024px) { /* أنماط للأجهزة اللوحية */ }
height وmin-height وmax-height: تُستخدم للتحكم في ارتفاع الشاشة. @media (min-height: 500px) { /* أنماط للأجهزة ذات الارتفاع الكبير */ }
orientation: يحدد اتجاه الشاشة (portrait أو landscape). @media (orientation: landscape) { /* أنماط للشاشات الأفقية */ }
resolution وmin-resolution وmax-resolution: تُستخدم للتحكم في دقة الشاشة. @media (min-resolution: 300dpi) { /* أنماط للشاشات عالية الدقة */ }

أفضل الممارسات لاستخدام Media Queries

استخدم نهج Mobile-First: ابدأ بكتابة الأنماط للأجهزة المحمولة أولاً، ثم أضف Media Queries للأجهزة الأكبر. /* أنماط أساسية للأجهزة المحمولة */ body { font-size: 14px; } /* أنماط للأجهزة اللوحية */ @media (min-width: 768px) { body { font-size: 16px; } } /* أنماط لأجهزة الكمبيوتر */ @media (min-width: 1024px) { body { font-size: 18px; } }
استخدم وحدات نسبية: استخدم الوحدات النسبية مثل % وem وrem بدلاً من الوحدات الثابتة مثل px لجعل التصميم أكثر مرونة.
اختبر على أجهزة متعددة: تأكد من اختبار التصميم على أجهزة مختلفة لضمان تجربة مستخدم سلسة.

أمثلة عملية

تغيير تخطيط الصفحة بناءً على عرض الشاشة: .container { display: flex; flex-direction: column; } @media (min-width: 768px) { .container { flex-direction: row; } }
إخفاء عنصر على الأجهزة الصغيرة: .sidebar { display: block; } @media (max-width: 600px) { .sidebar { display: none; } }
تغيير حجم الخط بناءً على دقة الشاشة: body { font-size: 16px; } @media (min-resolution: 300dpi) { body { font-size: 18px; } }

الخلاصة

Media Queries هي أداة قوية في CSS تمكنك من إنشاء تصميمات متجاوبة تعمل على جميع الأجهزة. بفهمك للخصائص المختلفة مثل width وheight وorientation، يمكنك تخصيص تجربة المستخدم بناءً على الجهاز المستخدم. تذكر دائمًا اتباع أفضل الممارسات مثل نهج Mobile-First واستخدام الوحدات النسبية لضمان تصميم سلس وفعّال.

جميع الوسائط (Media Queries) لجميع الأجهزة
`all`	جميع الأجهزة.
`screen`	الشاشات (أجهزة الكمبيوتر، الأجهزة اللوحية، الهواتف الذكية).
`print`	الطابعات.
`speech`	قارئات الشاشة (للمكفوفين).
`width`, `min-width`, `max-width`	عرض الشاشة (يمكن تحديد الحد الأدنى أو الأقصى للعرض).
`height`, `min-height`, `max-height`	ارتفاع الشاشة (يمكن تحديد الحد الأدنى أو الأقصى للارتفاع).
`orientation`	اتجاه الشاشة (`portrait` للوضع العمودي، `landscape` للوضع الأفقي).
`aspect-ratio`, `min-aspect-ratio`, `max-aspect-ratio`	نسبة العرض إلى الارتفاع لمنطقة العرض.
`device-aspect-ratio`, `min-device-aspect-ratio`, `max-device-aspect-ratio`	نسبة العرض إلى الارتفاع للشاشة.
`color`, `min-color`, `max-color`	عدد البتات لكل لون للجهاز.
`color-index`, `min-color-index`, `max-color-index`	عدد الألوان التي يمكن للجهاز عرضها.
`monochrome`, `min-monochrome`, `max-monochrome`	عدد البتات لكل بكسل في الشاشات أحادية اللون.
`resolution`, `min-resolution`, `max-resolution`	دقة الشاشة (مثل 300dpi).
`scan`	نوع المسح (progressive أو interlace) لأجهزة التلفزيون.
`grid`	يحدد ما إذا كان الجهاز يعتمد على شبكة (مثل الطابعات أو الهواتف القديمة).

جميع Media Queries للشاشات (Screen)
`screen and (max-width: 600px)`	تطبيق الأنماط على الشاشات التي يكون عرضها أقل من أو يساوي 600px (أجهزة محمولة).
`screen and (min-width: 601px) and (max-width: 1024px)`	تطبيق الأنماط على الشاشات التي يكون عرضها بين 601px و1024px (أجهزة لوحية).
`screen and (min-width: 1025px)`	تطبيق الأنماط على الشاشات التي يكون عرضها أكبر من 1025px (أجهزة كمبيوتر).
`screen and (orientation: portrait)`	تطبيق الأنماط على الشاشات في الوضع العمودي.
`screen and (orientation: landscape)`	تطبيق الأنماط على الشاشات في الوضع الأفقي.
`screen and (min-resolution: 300dpi)`	تطبيق الأنماط على الشاشات ذات الدقة العالية (300 نقطة في البوصة أو أكثر).
`screen and (max-resolution: 150dpi)`	تطبيق الأنماط على الشاشات ذات الدقة المنخفضة (150 نقطة في البوصة أو أقل).
`screen and (aspect-ratio: 16/9)`	تطبيق الأنماط على الشاشات ذات نسبة العرض إلى الارتفاع 16:9.
`screen and (min-aspect-ratio: 4/3)`	تطبيق الأنماط على الشاشات التي تكون نسبة العرض إلى الارتفاع فيها أكبر من أو تساوي 4:3.
`screen and (max-aspect-ratio: 3/2)`	تطبيق الأنماط على الشاشات التي تكون نسبة العرض إلى الارتفاع فيها أقل من أو تساوي 3:2.
`screen and (color)`	تطبيق الأنماط على الشاشات التي تدعم الألوان.
`screen and (monochrome)`	تطبيق الأنماط على الشاشات أحادية اللون.
`screen and (min-color: 8)`	تطبيق الأنماط على الشاشات التي تدعم 8 بتات على الأقل لكل لون.
`screen and (max-color: 4)`	تطبيق الأنماط على الشاشات التي تدعم 4 بتات أو أقل لكل لون.
`screen and (color-index: 256)`	تطبيق الأنماط على الشاشات التي تدعم 256 لونًا على الأقل.
`screen and (min-color-index: 1024)`	تطبيق الأنماط على الشاشات التي تدعم 1024 لونًا على الأقل.
`screen and (max-color-index: 512)`	تطبيق الأنماط على الشاشات التي تدعم 512 لونًا أو أقل.

اوعي وشك

استكشف في مدونة أوعي وشك عالم الابتكار

Media Queries الأدوات التي تجعل موقعك يعمل بسلاسة على أي جهاز