هل واجهت وضعا حيث النص والكتل التي تناسب تماما في تخطيط فوتوشوب لسبب ما عنيد لا تريد الانصياع في التخطيط - لا تنسجم مع العرض المحدد من قبل التخطيط؟ في نفس الوقت ، يستخدم كل من المصمم ومصمم التخطيط نفس الشبكة ، على سبيل المثال ، شبكة Bootstrap 3.
بعد مراجعة عدد كبير من المواقع ، توصلت إلى استنتاج مفاده أنه في خضم المصممين ومصممي التخطيط ، حدث خطأ شائع واحد.
تقوم شبكة bootstrap ، كمثال شائع على الشبكة ، بإعداد تخطيط مكون من 12 عمودًا ، والذي يكون على شاشات 1200 بكسل أو أكثر عرضًا أبعاد بين أعمدة 30 بكسل و هوامش جانبية 15px للمحتوى على اليسار واليمين. بالنظر إلى أن عرض الأعمدة يتم تعيينه بواسطة المصمم بالبكسل ، وأن مصمم التخطيط كنسبة مئوية ، فإن الخطأ الموضح أدناه لا يمكن ملاحظته على الفور.
كيف يعمل المصمم مع الشبكة؟ عادةً ما يتم إنشاء هذه الشبكة بواسطة خدمة ما ، يتم تنزيلها وتثبيتها في Photoshop. كيف يعمل مصمم التخطيط مع الشبكة؟ الشبكة مأخوذة من إطار Bootstrap 3.
ثم ما هي المشكلة إذا كانت أبعاد الشبكة (الأعمدة والفواصل الزمنية) هي نفسها؟
يكمن جوهر المشكلة في خاصية "تحجيم الصندوق" المريحة لخاصية CSS مع القيمة "حد المربع" ، والتي يتم تعيينها افتراضيًا في التمهيد. لهذا السبب ، يأخذ المصمم في الاعتبار عرض الهوامش الجانبية بالإضافة إلى عرض المحتوى (1170 بكسل بالإضافة إلى الهوامش الجانبية 15 بكسل على اليمين واليسار) ، ومصمم التخطيط نفسه ، دون معرفة ذلك ، يتضمنهم في عرض المحتوى (1170 بكسل ، بما في ذلك الهوامش الجانبية 15 بكسل ، عرض المحتوى 1140 بكسل). وبالتالي ، اتضح أنه في المشروع في مراحل مختلفة ، يتم استخدام شبكتين مختلفتين ومصمم التخطيط له شبكة أضيق.
يحدث هذا الخطأ أيضًا عند استخدام شبكات غير Bootstrap. على ما يبدو ، وُلد مع ظهور "الصندوق الحدودي".
الحل بسيط - اضبط حجم الحاوية: "حاوية {عرض: 1200 بكسل ؛}" (1170 بكسل - محتوى زائد مسافة بادئة 15 بكسل على اليمين واليسار). من الضروري أيضًا إجراء التعديل المناسب للحاوية بمقدار التباعد الجانبي لشاشات القرارات الأخرى.
يبدو لي أنه لا معنى للجدل حول من المسؤول عن إصلاح الخطأ. من الجيد أن يقوم المصمم بتوضيح هذا السؤال مع مصمم التخطيط ، وينبغي أن يتذكر مصمم التخطيط هذه الميزة باستخدام "مربع الحدود" للشبكة. تعمل إصلاحات الأخطاء في إطار واسع النطاق أيضًا على زيادة عدد المواقع التي تتوافق تمامًا مع التصميم.