اليوم أصبح من الضروري أن يظهر موقعك بشكل رائع على كل الشاشات: الهواتف، الأجهزة اللوحية، وأجهزة الكمبيوتر.
ولتحقيق ذلك، نستخدم أداة مهمة في CSS اسمها Media Queries.
في هذه المقالة، سأشرح لك بطريقة سهلة كيف تستعمل Media Queries وتطوّر تصميم موقعك ليكون مناسبًا للجميع.
ما هي ال Media Queries؟
Media queries: ببساطة بتسمحلك تغير شكل وتصميم موقعك حسب حجم الشاشة أو نوع الجهاز.
زي مثلًا:
-
عرض الشاشة (width)
-
ارتفاع الشاشة (height)
-
دقة الشاشة (resolution)
-
اتجاه الشاشة (أفقي ولا رأسي)
-
مثال بسيط:
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
في هذا المثال، يتغير لون الخلفية إلى الأزرق الفاتح عندما يكون عرض الشاشة 768 بكسل أو أقل (غالبًا موبايل أو تابلت).
لماذا Media Queries مهمة؟
-
تجعل تصميم موقعك متجاوبًا مع جميع أنواع الأجهزة.
-
تحسن تجربة المستخدم وتجعل التصفح أكثر راحة.
-
تساعد على تحسين ترتيب موقعك في نتائج البحث (SEO).
-
تغنيك عن عمل نسخة منفصلة للموبايل.
نصائح لاستخدام Media Queries بشكل أفضل:
صمّم أولًا لشاشات الموبايل، ثم وسّع التصميم للأجهزة الأكبر (استراتيجية “موبايل أولًا”).
استخدم قياسات مرنة مثل النسب المئوية (%) بدل المقاسات الثابتة (px) عندما يكون ذلك ممكنًا.
رتب جميع Media Queries في مكان واضح في ملف CSS ليسهل عليك تعديلها لاحقًا.
لا تفرط في تحديد نقاط توقف كثيرة جدًا، حدد نقاط ذكية تغطي أغلب الأجهزة.
نقط توقف (Breakpoints) مشهورة
/* موبايل */
@media (max-width: 480px) {}
/* تابلت */
@media (max-width: 768px) {}
/* لابتوب */
@media (max-width: 1024px) {}
/* شاشات كبيرة */
@media (min-width: 1200px) {}
Media Queries أسلوب ذكي يجعل موقعك يظهر بشكل جيد مهما تغير حجم الشاشة.
إذا تعلمت استخدامها بشكل صحيح، ستقدم لمستخدمي موقعك تجربة سلسة ومريحة على كل الأجهزة.
ابدأ بتجربتها، وستلاحظ فرقًا كبيرًا في جودة تصميمك!
ماذا عنك؟
هل تستخدم Media Queries بطريقة مختلفة في مشاريعك؟ أو هل لديك نصائح إضافية تود مشاركتها معنا؟
اكتب رأيك أو تجربتك في التعليقات
