تشير أغلب الأحصائيات في الفترة الأخيرة أن نسبة كبيرة من مستخدمي الأنترنت يستخدمون الهواتف المحمولة او الأجهزة اللوحية، وهو ما يشير إلي أهمية أن يكون موقعك او مدونتك مناسباً لجميع الزوار.
وهنا يتضح أمراً مهم، كيف تستطيع عمل موقع يتناسب مع جميع الشاشات بدون أخطاء، حيث هناك طريقتين لهذا الأمر الأولي عمل نسخة من موقعك تعمل مع الهواتف المحمولة وهو ما توفره بلوجر في شكل مجموعة من التصميمات البسيطة نوعاً ما، والطريقة الأخري هي أستخدام التصميم المتجاوب الذي يعمل بنفس الكفائة تقريباً مع جميع الأجهزة.
التصميم المتجاوب هو أسهل الطريقيتن فهو سهل في التعامل معه ويعمل بشكل أفضل، والتصميم المتجاوب هو تصميم يستخدم أحد التقنيات الحديثة في لغة CSS وهي تقنية Screen Query وهي عبارة عن دوال شرطية تعمل علي أظهار عناصر جديدة وأخفاء أخري تغير الأماكن العناصر وتغير أبعادها بأستخدام توقع كامل للشاشة التي تعرض الموقع، وكل شاشة ولها طريقة عرضها.
فمثلاً عندما اريد عرض صورة في جانب الموقع سيكون الكود الخاص بها هكذاً
بأستخدام تقنية Screen Query أستطيع التحكم في ظهور هذة الصورة بأسخدام هذا الكود مثلاً
هذا الكود معناه ان الكود
للحصول علي تصميم متجاوب هناك عدة طريق وهي كالتالي:
* ملحوظة : اي تصميم متجاوب يجب ان يحتوي أسفل <head> مباشرة علي هذا الكود وهو الكود الخاص بتوقع الشاشة وتطبيق الأوامر الخاصة بأكواد CSS حسب اكواد Screen Query
في نهاية الجزء الأول نكون قد حصلنا علي فكرة مبسطة علي طريقة عمل التصميمات المتجاوبة، في الجزء الثاني سنتابع الحديث عن وحدات ادسنس المتجاوبة وطريقة استخدامها والتعديل عليها.
الأن يمكنك قراءة الجزء الثاني من كيفية أستخدام وحدات ادسنس
وهنا يتضح أمراً مهم، كيف تستطيع عمل موقع يتناسب مع جميع الشاشات بدون أخطاء، حيث هناك طريقتين لهذا الأمر الأولي عمل نسخة من موقعك تعمل مع الهواتف المحمولة وهو ما توفره بلوجر في شكل مجموعة من التصميمات البسيطة نوعاً ما، والطريقة الأخري هي أستخدام التصميم المتجاوب الذي يعمل بنفس الكفائة تقريباً مع جميع الأجهزة.
ما هو التصميم المتجاوب؟
فمثلاً عندما اريد عرض صورة في جانب الموقع سيكون الكود الخاص بها هكذاً
<img src="http://example.com/image.jpg" />
لتميز هذة الصورة عن باقي الصور التي يعرضها الموقع سنقوم بأعطائها أسم خاص بها وسيكون هكذا
<img class="mypic" src="http://example.com/image.jpg" />
بأستخدام تقنية Screen Query أستطيع التحكم في ظهور هذة الصورة بأسخدام هذا الكود مثلاً
@media screen and (max-width: 1000px) {
img.mypic { display:none; }
}
أستخدام
display:none للصورة mypic سيجعل الصورة لا تعمل لكن عند وضعه داخل الكود الخاص media screen يعني كما هو ظاهر ان كود display:none لن يعمل الا عندم تصبح الشاشة أقل من 1000 وهذا يعني ان الصورة ستعمل فقط مع الشاشات فوق 1000px ومثلا عند تغير القيمة max ل min ستعمل الصورة مع الشاشات اللأقل من 1000 فقط أي عكس الكود السابق.
أذا كنت تريد مثلا تخصيص عرض معين كحد أقصي وادني أي ان الاكواد بداخله ستعمل فقط داخل هذا النطاقة سيكون الكود السابق مثلا بهذا الشكل
@media screen and (max-width: 1000px) and (min-width:500px) {
img.mypic { display:none; }
}
display:none سيعمل فقط داخل النطاق 1000 إلي 500px اي ان الصورة لن تظهر في نفس النطاق وستعمل مع الشاشات فوق 1000px واقل من 500px كما يمكن أستخدام نفس الفكرة مع height الأرتفاع كما هو الحال مع العرض.كيف تحصل علي تصميم متجاوب؟
للحصول علي تصميم متجاوب هناك عدة طريق وهي كالتالي:
- الحصول علي قالب مصمم بشكل متجاوب (سواء بتحميل احدهم مجاناً، أو تعريب قالب)
- الحصول علي قالب وتحويله بشكل متجاوب (سنقوم في بلوجرام بالتركيز علي هذة النقاط)
- يمكنك طلب خدمة تحويل قوالب بلوجر لقالب متجاوب من خدمتي في موقع خماسات
* ملحوظة : اي تصميم متجاوب يجب ان يحتوي أسفل <head> مباشرة علي هذا الكود وهو الكود الخاص بتوقع الشاشة وتطبيق الأوامر الخاصة بأكواد CSS حسب اكواد Screen Query
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
في نهاية الجزء الأول نكون قد حصلنا علي فكرة مبسطة علي طريقة عمل التصميمات المتجاوبة، في الجزء الثاني سنتابع الحديث عن وحدات ادسنس المتجاوبة وطريقة استخدامها والتعديل عليها.
الأن يمكنك قراءة الجزء الثاني من كيفية أستخدام وحدات ادسنس
عن الكاتب
محمد السيد وألقب ب (ميدو) مصري الوطن والجنسية، أبلغ من العمري 20 عاماً، بدأت في مجال التدوين في عام 2011، تدرجت في هذا المجال حتي يومنا هذا وقد بلغت من العلم قليله.
الله ينور يا ميــــــــدو
ردحذفربنا يخليك يا معلم :))
حذف