سبق وقد تكلمنا عن نموذج الجوال الآن سنتحدث عن التجاوب أولأ نبدأ بـ
تعريف التجاوب : التجاوب هو جعل قالب الموقع متغير الحجم بحيث يتناسب مع الشاشات والأجهزة المختلفة مثل التابلت والهواتف الذكيةما الفرق بين التجاوب ونموذج الهاتف : هناك امرين يفرقان بين نموذج الهاتف والتجاوب
الاول السرعة : وهذا سيكون في صالح نموذج الهاتف حيث أنه اسرع كثيراً لانه يقوم بإلغاء أغلب الادوات وملفات الجافا وتخفيض جودة الصورة فيجعل التحميل سريع
الثاني الإحترافية : وهذا سيكون في صالح التجاوب حيث انه يتم الإحتفاظ بشكل القالب وأدواته كاملة طبعاً يؤثر على السرعة لكنه يكون أكفأ في العمل لمن يحتاج الادوات تظهر لمن يتصفح بالاجهزة الذكية
كيف يتم انشاء التجاوب ؟
أولا كود الميتا تاج التالي يجب ان يضاف في بداية القالب بعد الوسم<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>ثم بعد ذلك يرجع العمل على الكود التالي
اكواد الـ CSS
}
الكود ببساطة يعني أنه عندما تكون الشاشة بحجم 400 بيكسل يتم تفعيل هذا الستايل
يعني كل ما ستضعه من اكواد الـ CSS في وسط الكود السابق سيتم تنشيطها عند وصول الشاشة لهذا الحجم
يمكنك تكرار الكود مع تغيير الحجم ان اردت عمل اكثر من ستايل وكلما اصبحت الشاشة في حجم محدد تتغير للستايل الذي بها
أغلب ما يتم التعامل معه هو الأحجام , لنقل مثلا ان الهيدر في نموذج الحاسب حجمها 900 بيكسل ان اعطيتها حجم 300 مثلا في كود التجاوب فعندما تصبح أبعاد الشاشة 400 بيكسل ستصبح الهيدر بمقاس 300 بيكسل فتظهر بشكل مناسب
أشهر الأحجام المستخدمة في التجاوب هي 980 , 790 , 400
فعندما تبني ستايل يتناسب مع ابعاد الشاشة من 980 الى 790 انت ضمنت عرضه بشكل جيد على أغلب الاجهزة اللوحية
وعندما تضبطه من 790 الى الـ 400 ستضمن أغلب الهواتف ذات الكبيرة والمتوسطة
اما من 400 فأقل فستضمن باقي الهواتف ذات الشاشات الصغيرة
طبعا من المهم أن يكون القالب بنيته جيده لان لو بنيته سيئة أو معتمد على الصورة
سيكون لكي تجعله متجاوب ستضطر لإستخدام كثير من اكواد الـ CSS اما لو بنيته جيده ستستخدم غالباً اكواد العرض Width
هناك كود أخير ستحتاج استخدامه وهو التالي
<b:if cond='data:blog.isMobileRequest == "false"'>هذا الكود يخص أكواد الـ HTML , JavaScript
هنا الاكواد
</b:if>
معناه ان اى اكواد ستضيفها بين هذا الكود لن تعرض على الهاتف
أو ان غيرت false الى true
معناه انها ستعرض على الهاتف فقط
المبدتئين أو من ليس لديهم خبرة في الت CSS ماذا يفعلون
ببساطة سيفيدك أن تعرف عندما ترى اى من تلك الاكواد في قالبك ان كان متجاوب الا تعبث بها فهي معناها انها خاصة بالهاتف فتتجنب التلاعب بها
هناك فائدة أخرى وهي إن اضفت آداة ولا تريدها ان تعمل على الهاتف ان تستخدم معها الكود الأخير حتى لا يفسد مظهر القالب على الهاتف لان أغلب الادوات المشروحة في المواقع لا يراعى فيها التجاوب
كيف يتم تفعيل التجاوب في القالب
من لوحة التحكم >قالب>ثم تضغط على رمز الترس تحت نموذج الجوالوتختار لا. إظهار نموذج سطح المكتب على أجهزة الجوال
No comments:
Post a Comment