كيف أستخدم Media Queries؟
Media Queries هي أداة قوية في تصميم الويب تُستخدم لجعل صفحات الويب تتكيف مع مختلف أحجام الشاشات وأجهزة العرض، مثل الهواتف الذكية، الأجهزة اللوحية، وأجهزة الكمبيوتر المكتبية. ببساطة، تسمح لك Media Queries بتغيير أنماط CSS بناءً على خصائص الجهاز الذي يعرض الصفحة، مما يحسن تجربة المستخدم بشكل كبير.
ما هو Media Query؟
Media Query هو شرط CSS يتم تطبيقه فقط إذا تحقق شرط معين، مثل عرض الشاشة أو دقتها. مثلاً، يمكنك كتابة استايل معين يظهر فقط عندما يكون عرض الشاشة أقل من 600 بكسل، وهذا يجعل التصميم يتمرد تلقائيًا حسب حجم شاشة المستخدم.
كيفية كتابة Media Query
للبدء باستخدام Media Queries، عليك استخدام قاعدة @media داخل ملف CSS الخاص بك. الصيغة الأساسية تكون كالتالي:
@media (media-feature) {
/* أنماط CSS هنا */
}
على سبيل المثال، إذا أردت تطبيق بعض الأنماط فقط على الشاشات التي تكون أقل من 768 بكسل في العرض، ستكتب:
@media (max-width: 768px) {
/* هنا توضع الأنماط الخاصة بالشاشات الصغيرة */
}
أمثلة عملية لاستخدام Media Queries
لنفترض أن لديك صفحة ويب تريد فيها تغيير حجم الخط أو إخفاء عنصر معين على الهواتف المحمولة، يمكنك فعل ذلك كالتالي:
@media (max-width: 600px) {
body {
font-size: 14px;
}
.sidebar {
display: none;
}
}
في هذا المثال، عندما يقل عرض الشاشة عن 600 بكسل، سيتم تقليل حجم الخط إلى 14 بكسل وإخفاء قائمة الجانب الجانبية.
الخصائص الشائعة في Media Queries
يمكن استخدام العديد من الخصائص مع Media Queries، من أشهرها:
width: عرض الشاشة أو النافذة.height: ارتفاع الشاشة أو النافذة.orientation: يحدد إذا كانت الشاشة أفقية (landscape) أو عمودية (portrait).resolution: دقة الشاشة.
مثال لتغيير التصميم عند وضعية الشاشة العمودية:
@media (orientation: portrait) {
/* أنماط للعرض العمودي */
}
نصائح لاستخدام Media Queries بفعالية
عند استخدام Media Queries، من المهم اتباع بعض النصائح لجعل التصميم مرن ومريح للمستخدمين:
- ابدأ بتصميم مرن (Responsive Design) يتكيف مع جميع الشاشات بدلًا من تصميمين منفصلين.
- استخدم Media Queries بناءً على النقاط الفاصلة (breakpoints) التي تتناسب مع المحتوى، وليس فقط بناءً على أنواع الأجهزة.
- احرص على اختبار الموقع على مختلف الأجهزة لحفظ تجربة جيدة للجميع.
باستخدام Media Queries بشكل صحيح، يمكنك تحسين تجربة المستخدم وجعل موقعك يبدو رائعًا على أي جهاز مهما كان حجمه.
