تصميم متجاوب: الحفاظ على شكل عناصر الترميز

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

مثال بسيط من الممارسة. تتكون الصفحة من ثلاثة أعمدة: القائمة الرأسية اليسرى ، الصورة ، القائمة الرأسية اليمنى.

عند تغيير حجم النافذة ، يجب أن تمتد الصورة (تتقلص) ، وتبقى في الفراغ بين القوائم اليمنى واليسرى. في المقابل ، يجب تمثيل عناصر القائمة بمساحات مربعة ، والتي يجب أن تظل مربعة عند تغيير حجم النافذة:



يمكننا تمثيل صفحتنا بقائمتين غير مرتبة وصورة في المنتصف:

<ul class="left-navigation"> <li> menu 1 </li> <li> menu 2 </li> <li> menu 3 </li> </ul> <div class="picture"> <img src="img/fox.jpg"> </div> <ul class="right-navigation"> <li> menu 1 </li> <li> menu 2 </li> <li> menu 3 </li> </ul> 

ضبط عرض القوائم على 4٪:

 .left-navigation, .right-navigation { width: 4%; list-style: none; float: left; padding-left: 0; margin: 0; } .right-navigation { float: right; } .left-navigation li, .right-navigation li { border: 1px solid black; cursor: pointer; } 

والصور 92٪:

 .picture { box-sizing: border-box; padding: 30px; width: 92%; float: left; } .picture img { width: 100%; } 

ونتيجة لذلك ، ستبدو الصفحة كما يلي:



سيتم تغيير حجم الصورة والقائمة عندما يتم تغيير حجم النافذة
يمكن ملاحظة أن عناصر القائمة ليست مربعة. هذا أمر طبيعي ، لأن كل ما قمنا به هو تعيين عرض القائمة كنسبة مئوية ، تاركًا تثبيت ارتفاع العناصر تحت رحمة خوارزمية التقديم.

يمكنك ، بالطبع ، تعيين أبعاد عنصر القائمة بشكل صريح بوحدات مطلقة. سيحصلون على الشكل المربع المطلوب ، لكن التخطيط سيفقد الخصائص التكيفية. ما عليك سوى تحديد الارتفاع كنسبة مئوية:

 width: 4%; height: 4%; 

أيضًا ليس حلاً ، لأن عرض العنصر الرئيسي وارتفاعه (وفي حالتنا يكون الجسم) ليسا عادةً متشابهين.

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

 padding-left, padding-right 

، ولكن أيضًا المسافة البادئة العمودية:

 padding-top, padding-bottom 

والشيء التالي الذي نحتاجه هو محدد بعد الزائفة. سيضيف عنصر زائف صفر الارتفاع داخل العنصر لدينا تمتد عبر العرض. إذا قمنا بضبط مساحة الحشو العلوية أو الحشو السفلية على هذا العنصر الزائف إلى 100٪ ، فسيتم تعيين قيمة المسافة البادئة مساوية لعرض الأصل (العنصر الممتد ، li في حالتنا).

 .left-navigation li:after, .right-navigation li:after { content: ''; display: block; padding-bottom: 100%; } 

ونتيجة لذلك ، سيصبح ارتفاع العنصر الممتد مساويًا لعرضه وستصبح عناصر القائمة مربعة:



لإضافة محتوى داخل عنصر قائمة ، نستخدم الموضع المطلق:

 .left-navigation li a, .right-navigation li a { position: absolute; margin-left: 2%; margin-top: 2%; } .left-navigation li a img, .right-navigation li a img{ transform: translate(-50%, -50%); } 

ونتيجة لذلك ، ستأخذ الصفحة الشكل المطلوب:



والأهم من ذلك ، ستظل عناصر القائمة مربعة عند تغيير حجم النافذة.