تشير أغلب الأحصائيات في الفترة الأخيرة أن نسبة كبيرة من مستخدمي الأنترنت يستخدمون الهواتف المحمولة او الأجهزة اللوحية، وهو ما يشير إلي أهمية أن يكون موقعك او مدونتك مناسباً لجميع الزوار.
وهنا يتضح أمراً مهم، كيف تستطيع عمل موقع يتناسب مع جميع الشاشات بدون أخطاء، حيث هناك طريقتين لهذا الأمر الأولي عمل نسخة من موقعك تعمل مع الهواتف المحمولة وهو ما توفره بلوجر في شكل مجموعة من التصميمات البسيطة نوعاً ما، والطريقة الأخري هي أستخدام التصميم المتجاوب الذي يعمل بنفس الكفائة تقريباً مع جميع الأجهزة.
ما هو التصميم المتجاوب؟
التصميم المتجاوب هو أسهل الطريقيتن فهو سهل في التعامل معه ويعمل بشكل أفضل، والتصميم المتجاوب هو تصميم يستخدم أحد التقنيات الحديثة في لغة CSS وهي تقنية Screen Query وهي عبارة عن دوال شرطية تعمل علي أظهار عناصر جديدة وأخفاء أخري تغير الأماكن العناصر وتغير أبعادها بأستخدام توقع كامل للشاشة التي تعرض الموقع، وكل شاشة ولها طريقة عرضها.
فمثلاً عندما اريد عرض صورة في جانب الموقع سيكون الكود الخاص بها هكذا
<img src="http://example.com/image.jpg" />
لتميز هذة الصورة عن باقي الصور التي يعرضها الموقع سنقوم بأعطائها أسم خاص بها وسيكون هكذا
<img class="myhome" src="http://example.com/image.jpg" />
بأستخدام تقنية Screen Query أستطيع التحكم في ظهور هذة الصورة بأسخدام هذا الكود مثلاً
@media screen and (max-width: 1000px) {
img.myhome { display:none; }
}
أذا كنت تريد مثلا تخصيص عرض معين كحد أقصي وادني أي ان الاكواد بداخله ستعمل فقط داخل هذا النطاقة سيكون الكود السابق مثلا بهذا الشكل.
@media screen and (max-width: 1000px) and (min-width:500px) {
img.myhome { 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'/>
في نهاية الجزء الأول نكون قد حصلنا علي فكرة مبسطة علي طريقة عمل التصميمات المتجاوبة، في الجزء الثاني سنتابع الحديث عن وحدات ادسنس المتجاوبة وطريقة استخدامها والتعديل عليها.
الأن يمكنك قراءة الجزء الثاني " طريقة أستخدام وحدات ادسنس المتجاوبة | الجزء الثاني " .
0 Comments:
إرسال تعليق