التصميم المتجاوب

يوجد العديد من الطرق التي تمكنك من جعل الموقع متجاوب بدون media queries  في بعض الأحيان أو مع استخدام بسيط لل media queries.

فمثلًا:

• استخدام   bootStrap-grid-system bootstrap classes

فمثلا يمكن استخدام عدة كلاسات معًا كلًا منها يحدد عدد الأعمدة التي يشغلها عنصر معين 

• استخدام css flexbox يمكنك الإطلاع عليه من خلال الرابط التالي  flexbox  و  css grid من خلال هذا الرابط  grid

css flexbox هي التقنية التي بُني على أساسها bootstrap و هي تقوم بتقسيم الصفحة إلى أعمدة و كذلك css grid و لكن الفرق الأساسي بينهما هو أن css flexbox صممت لتنسيق الصفحة في بعد واحد أما css grid صممت لتنسيق الصفحة في بعدين.

الصورة التالية توضح ذلك:  

يمكنك أيضًا الإطلاع على الروابط التالية :

 لعبة بسيطة تساعد في فهم flexbox

لعبة بسيطة تساعد في فهم css grid

فباستخدام هذه التقنيات معا يمكنك التقليل من ال media queries و ستوفر عليك إعادة كتابة الكثير من التنسيقات.

مرحبًا صلاح..

إذا كان الموقع بسيط نعم بالإمكان إنجاز ذلك من خلال إتباع الأساليب التالية :

1 - قم بإستخدام الوحدات المئوية (Percentage Units) عند تعيين قيم لكل من خاصية الpadding و margin , مثال :

2 - قم بإستخدام الخاصية max-width لمنع محتوى عنصر ما من أن يمتد بشكل مبالغ فيه و في نفس الوقت يظل قابل للإنكماش في الشاشات الصغيرة , مثال :

3 - إستخدم الوحدة المئوية عند تعيينك قيمة خاصية width للعناصر بهذه الطريقة العنصر سيأخد حجم أقل كل ما صغرت الشاشة و عند إستخدامها مع الخاصية max-width  تمنع العنصر من أن يمتد بشكل كبير في الشاشات الكبيرة , مثال :

4 - أما بالنسبة للعناصر التي تمتلك حجم معين قم بإستخدام الخاصية float بهذه الطريقة ستتأكد من أن العناصر ستستصطف بجانب بعضها البعض و في حال عدم وجود مساحة كافية للعنصر سينتقل بشكل تلقائي إلى السطر الذي يليه ( فقط تأكد من أن تمتلك العناصر نفس الطول حتى لا تظهر العناصر بشكل غير مرتب عند إنتقالها للسطر التالي ) , مثال :

أما في حال إذا ما كان التصميم كبير أو معقد أو ترغب في جعله ذو تجاوب عالي مع مختلف أحجام الشاشات ( highly responsiv ) فلا مفر من إستخدامك للmedia queries كما أن إستخدامك للmedia queries يظل أفضل من عمل تصميمين مستقلين أحدهما للموبايل و الأخر لشاشات الحاسوب و مع إكتسابك للخبرة و التخطيط الجيد بإمكان جعل حجم شيفرات الcss المكتوبة أقل بكثير.

ملاحظة : bootstrap grid system يستخدم في media queries.

في أغلب الأحيان كلما زادت سهولة الإستخدام للصفحة أو التطبيق زاد حجم الكود وذلك لدراسة مدى زيادة إحتمالية التغيير ,

فمثلا في الهاتف تجد له كود مخصص لا يعمل هو نفسه في التابلات والحاسوب والعكس صحيح.

إذا ليس حل أخر لاستخدام ال media query.

• سؤال : إذا ما الحل هنا ؟
• الجواب : الحل هو إستخدام مكتبات معرفة و مفتوحة المصدر لاستخدامها مباشر دون إعادة نعريفها من جديد : 

و سنأخذ مكتبة البوتستراب Bootstrap كمثال :

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

فمثلا في هذا الكود توجد عدة تعريفات لل media ومعرفة داخل كل واحدة كلاسات classes مخصصة لهذه الأحجام 

أي أنها معرفة وبدقة وما عليك إلا أن تقوم باستدعاء اسم الكلاس class name في الحقل المخصص لها :

@media (max-width: 575.98px) { 
	.container{
  		width: 100%;
  	}
}

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { 
    .container{
  		width: 90%;
  	}
}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { 
	.container{
  		width: 80%;
  	}
}

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { 
	.container{
  		width: 70%;
  	}
}

في هذا المثال ماعليك إلا أن تقوم باستدعاء اسم الكلاس class name ثم تقوم البوتستراب بالباقي وهو إدراج الكود اللائق وذلك حسب نوع وعرض الشاشة كالأتي :

<div class="container">
  <!-- Content here -->
</div>

إذا فاستخدام ال query media لابد منه للأسباب التي ذكرناها .

واستخدام احدى المكتبات هو أحسن وسيلة للعمل بسهولة وسلاسة لكنك ستحتاج في بادئ الأمر أن تتعلم هذه المكتبات

وسأقوم بادراج أشهرها في هذه السلسلة :

من بين المكتبات الخاصة ب css التي ستساعدك على تحسين وتطوير الواجهة وتسهيلها :

• Bootstrap
• Materialize
• Foundation
• Semantic UI

بعد تعلم احدى هذه المكتبات وأنصحك بالبدأ بالبوتستراب لسهولتها واعتمادها في أغلب الشركات كمكتبة لل css و JavaScript

ستكون قادر على بناء صفحات متجاوبة مع جميع الأحجام و بكود سهل .

بالتوفيق