10/20/2018

settings_overscan print announcement
أهلا..في الدرس الأول من هذا البرنامج التعليمي أنشأنا نموذج إفتراضي مع صفوف وأعمدة رئيسية ، وبإستخدام خاصية استعلامات الوسائط جعلناها متجاوبة ، طبعا كانت الطريقة مستحسنة لكن ليست إحترافية .
في البداية دعني أدلك على رابط سريع للدرس الأول والذي يعتبر حجر أساس لهذا البرنامج التعليمي عليك مراجعته من خلال الرابط التالي...






مراجعة بسيطة لإستعلامات الوسائط Media Queries CSS

أنت تدرك الآن أن استعلام الوسائط هو تقنية CSS مقدمة في CSS3.
ويستخدم من خلال القاعدة @media لتضمين كتلة من خصائص CSS فقط إذا كان الشرط معينًا صحيحًا.

مثال

  • عند العرض من على سطح المكتب لنفترض أن خلفية قالب مدونتك بيضاء white بتنسيق #ffffff

  • 
        body {
            background-color: #ffffff;
        }
    

  • الآن إذا كانت نافذة المتصفح 600 بكسل أو أصغر ، فسنجعل لون الخلفية مثلا رمادي فاتح lightgray بتنسيق #d3d3d3

  • 
    @media only screen and (max-width: 600px) {
        body {
            background-color: #d3d3d3;
        }
    }
    

    إلى هنا أضن أن الفكرة واضحة ونحن متفقان على أن القاعدة @media أشبه ماتكون كعلامة شرطية خاصة بالأنماط يتم تطبيقها تبعا لأجهزة وسائط مختلفة.


أضف نقطة توقف

- في هذا الموضوع أو قل الجزء الثاني سنركز فقط كيف يمكننا إضافة نقطة توقف حيث تتصرف أجزاء معينة من التصميم بشكل مختلف على كل جانب من نقاط التوقف.
ومهم جدا لتجنب التكرار وإستهداف أكبر عدد ممكن من الإطارات حتى التي لم تنتج بعد...الطريقة جد سهلة وتعتمد كليا على إسم الفئة - الكلاس - col- المهيء مسبقا بالدعامات أو قل مدعم مسبقا بالأنماط.

الخطوة الأولى - في التطبيق العملي

    سنحتاج في البداية وضع توليفة إسم الفئة - الكلاس - col- المهيء مسبقا بالدعامات في القالب حتى نستطيع إستدعائه متى إحتجنا له.
  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع توليفة css التالية..
  • cancel
    من المهم جدا أن تضع الأكواد التالية مباشرة فوق التوليفة الخاصة بإستعلامات الوسائط - أكواد التجاوب - التي قدمناها لكم في الجزء الأول..وإلا لن تعمل هذه الخاصية كما يجب.

    
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 37.66%;}
    .col-6 {width: 41.66%;}
    .col-7 {width: 50%;}
    .col-8 {width: 58.33%;}
    .col-9 {width: 66.66%;}
    .col-10 {width: 75%;}
    .col-11 {width: 83.33%;}
    .col-12 {width: 91.66%;}
    .col-13 {width: 100%;}
    

    لاحظ أن كل إسم فئة يحتوي على نسبة عرض مختلفة أنت هنا حر تستطيع إضافة دواعم جديدة ربما هي غير موجودة وأنت تحتاجها..فقط ماعليك سوى النزول لأسفل السطر وأكتب لقالبك نقطة توقف جديدة مع مراعاة شيئين
    الأول أحرص على أن يكون إسم الفئة - الكلاس - الجديد يحتوي على رقم مغاير مثلا .col-14 وثانيا ضع نسبة عرض جديدة له أنت تحتاجها وغير موجودة في التوليفة أو حتى دواعم مشتركة أخرى بجانب نسبة العرض .

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية - في التطبيق العملي

    طبعا أنت تذكر هذا النموذج الخاص بتقسيمات القالب هو نفسه الذي طبقنا عليه الشرح في الدرس الأول..سنقوم بتهيئته من جديد ليصبح متجاوب مع الأجهزة الذكية واللوحية لكن هذه المرة سنعتمد كليا على نقاط التوقف عن طريق إضافة إسم فئة - كلاس - مناسب لكل قسم من هذا النموذج..تابع معي.
    #header-wrapper <-- 100% --> .col-13
    #nav <-- 100% --> .col-13
    #content-wrapper <-- 100% --> .col-13
    #main <-- 350px --> .col-8
    #sidebar-wrapper <-- 250px --> .col-5
    شرح للنموذج
    القسم المحدد بهذا اللون هو رأس القالب <header> بما أن له عرض متجاوب 100% سنستدعي الدعامة .col-13 من خلال إعطائه نفس الكلاس بالشكل الآتي <header class="col-13" id="header-wrapper">
    القسم المحدد بهذا اللون هو حقل القائمة الرئيسية <nav> نفس العملية له عرض متجاوب 100% سنستدعي الدعامة .col-13 من خلال إعطائه نفس الكلاس بالشكل الآتي <header class="col-13" id="nav">
    القسم المحدد بهذا اللون هو حقل المحتوى المجمع <section> نفس العملية له عرض متجاوب 100% سنستدعي الدعامة .col-13 من خلال إعطائه نفس الكلاس بالشكل الآتي <header class="col-13" id="content-wrapper">
    القسم المحدد بهذا اللون هو حقل التدوينات <main> هنا الأمر مختلف لأن له عرض غير متجاوب 350px لذلك سنستدعي الدعامة القريبة من هذه النسبة وهي .col-8 من خلال إعطائه نفس الكلاس بالشكل الآتي <header class="col-8" id="main">
    القسم المحدد بهذا اللون هو الشريط الجانبي <aside> نفس العملية له عرض غير متجاوب 250px سنستدعي الدعامة القريبة من هذه النسبة وهي .col-5 من خلال إعطائه نفس الكلاس بالشكل الآتي <header class="col-5" id="sidebar-wrapper">
    القسم المحدد بهذا اللون هو تذييل القالب <footer> وهذا الأخير بما أن له عرض متجاوب 100% سنستدعي الدعامة .col-13 من خلال إعطائه نفس الكلاس بالشكل الآتي <header class="col-13" id="header-wrapper">


الخطوة الأخيرة - في التطبيق العملي

  • سأبدأ كالعادة مع أقصى عرض للشاشة الصغيرة وهو max-width:1024px وهذا لإستهداف أكبر إطار نزولا إلى أصغر شاشة دون اللجوء لإعادة تكرار الأكواد بالشكل التالي..

  • 
    @media screen and (max-width:1024px) {
    
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    
    }/*ipad pro*/
    

  • النتيجة التي تظهر على أداة المحكاة هي نفسها بالشكل التالي..
  • #header-wrapper <-- 100% --> .col-13
    #nav <-- 100% --> .col-13
    #content-wrapper <-- 100% --> .col-13
    #main <-- 100% --> .col-8
    #sidebar-wrapper <-- 100% --> .col-5
    لاحظ وقارن بين الطريقتين في الدرس الأول إحتجنا لتكرار الأنماط البديلة لكي نضبط نسبة عرض الحاويات الرئيسية أما هنا لم نضع سوى سطر أساسه إستهداف جميع العناصر التي لها قيمة سمة صنف تحتوي على col- وإعطائها نسبة عرض متجاوب 100% دفعة واحدة وعند المعاينة ستكون نفس النتيجة..أليس هذا رائعا.
    يمكنك إستخدام نفس هذه الطريقة لضبط الحشو padding: أو الهامش margin: أو الخط font: أو الألوان color: والخلفيات background:..إلخ وذلك لغرضين:
    الأول إستهداف أكبر عدد ممكن من الشاشات المختلفة الطول والعرض.
    ثانيا تجنب التكرار و بغض النظر عن العوامل الأخرى آخرها إدخال نفسك في دوامة وفوضى من الأنماط المتداخلة.
    report
    للعلم..هناك عدة طرق أخرى ومزايا تدور حول خاصية نقاط التوقف Breakpoint لكننا لم نرى داعي لشرحها كونها نادرة الإستخدام في تصميم قوالب البلوجر وفي نفس الوقت تتطلب خبرة كبيرة إذا أردت الإستزادة حول هذه الخاصية يرجى مراجعة هذا البرنامج المكمل إضغط هنا




add_commentإرسال تعليق

إرسال تعليق