يتوافق تخطيط السوائل المرنة في CSS مع عرض المحتوى المختلف

اليوم، نظرًا لأن شاشات المستخدمين أصبحت أكبر وأكبر، أصبح التصميم السابق ذو العرض الصلب 1024*768 قديمًا أكثر فأكثر بالنسبة للمستخدمين ذوي الشاشات الكبيرة، فإن المساحة الفارغة على كلا الجانبين تعطي الناس انطباعًا جادًا للوهلة الأولى هدرًا، كمصمم ويب، تقع على عاتقك مسؤولية منح هذه المجموعة من المستخدمين واجهة مستخدم جيدة.

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

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

دون مزيد من اللغط، دعونا نبدأ في إنشاء هيكل تخطيط مثل هذا.

قم أولاً ببناء طبقة الهيكل:

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

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

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

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

وبنفس الطريقة، يمكن أيضًا تنفيذ التذييل باستخدام هذه الطريقة.

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

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

لتوضيح التأثير، نضيف بعض التعديلات اللونية الأخرى، ويكون النمط النهائي كما يلي: