طرق لجعل التخطيط متوافقًا مع تغيير حجم النافذة وكذلك تغيير حجم الخط

Question

هل هناك دليل استشاري جيد / أفضل الممارسات وما إلى ذلك؟هناك والذي يوضح طرق جعل تخطيط الصفحة سلسًا بالطريقتين التاليتين:

أ) يجب أن يكون التصميم قويًا ضمن تغيير حجم النافذة

ب) يجب أن يتعامل التصميم بسلاسة مع عمليات تغيير حجم الخط التي يقوم بها المستخدم

في كل مرة أقوم فيها بتصميم تخطيط للصفحة، ينتهي بي الأمر باستخدام طرق مختلفة ومخصصة لجعل الصفحة قوية ضمن كل من أ) و ب) أعلاه.بعض الطرق التي استخدمتها من قبل هي:

• التعامل مع الجسم onresize()
• الإعلان عن جميع القيم بـ % (يتعطل هذا عندما يتعين تحديد أبعاد الصورة بالبكسل)
• وضع div عند -10000 بكسل واستقصائه على فترات زمنية للتحقق من تغيير حجم الخط (اللحظات!)

أجد أن هذه الطرق المذكورة أعلاه سيئة للغاية وأحب أن أجد طرقًا قياسية وقوية لهذه المشكلة.أنا متأكد من أن الأشخاص الآخرين هنا يواجهون (ويحلون) هذه المشكلات كل يوم.

Answer 1

إذا كنت تبحث عن حلول تخطيط أكثر تحديدًا، أود أن أقول إن الممارسة الشائعة هذه الأيام هي استخدام تخطيط الشبكة المبني مسبقًا.هناك عرض ثابت و إصدارات السوائل, ، وكلاهما يتناسب مع حجم خط المستخدم.YUI لديها أيضًا واحدة.لا يوجد JS ولا توجد أشياء خارج الشاشة.

لكنني أرى أيضًا إشارة إلى قيام المستخدم بتحجيم النص من داخل متصفحه.هذه ليست المشكلة التي كانت عليها من قبل.كان من المعتاد أن تكون حذرًا إلى حد ما - إذا وضعت نصًا بنسبة % فسيتم تغيير حجمه، ولكن لن يكون px كذلك في بعض المتصفحات.الآن، تعمل جميع المتصفحات على توسيع نطاق الصفحة ككل، بما في ذلك النصوص والصور - بما يتناسب مع بعضها البعض.تعديلات حجم النص تشبه حقًا قيامك "بتكبير" الصفحة، كما تنمو الصور أيضًا.يمكنك ببساطة قياس عرض النص والأعمدة بالبكسل (أو % أو pt أو أي شيء آخر) في وضع "الحجم الكامل"، ويتم ضبط المتصفحات بشكل جيد.

Answer 2

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

Answer 3

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

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

في الحالات الأكثر تعقيدًا، حيث يكون CSS وحده غير قادر على إعطائك المجموعة النسبية والمطلقة التي تريدها، توجد دائمًا جداول.ليست مثالية، ولكنها بشكل عام أفضل من التخطيط المعتمد على JavaScript.