في مقال آخر في مقالتي "تخطيط العرض الثابت" المرن "، قدمت خطة تخطيط مع مرنة بالإضافة إلى الحد الأدنى للعرض الثابت ، والآن سأقدم خطة تخطيط أخرى - تخطيط السائل المرن.
هذا الحل هو في الواقع تطبيق مرن لهذا التصميم. أكبر ميزة للتخطيط المرن هي أنه يمكن أن يستفيد بالكامل من مساحة الشاشة. بغض النظر عن حجم دقة العميل ، يمكن أن يتكيف تلقائيًا مع التغييرات في العرض.
الصورة 1
ألق نظرة على الصورة أعلاه. هذا موقع أجنبي. إنه تخطيط عرض ثابت. يعتمد تصميمنا على هذه الصورة. بالطبع ، لن أقدم مقدمة شاملة لكيفية جعل هذه الصفحة كاملة ، سأشرحها فقط للنقاط الرئيسية.
في الواقع ، من السهل نسبيًا إجراء تصميم مرن ، ولكن على الرغم من أن هذا التصميم بسيط ، فإن فهم التفاصيل هو جوهر هذا التصميم. على الرغم من أن التصميم المرن له مثل هذه المزايا الجيدة ، إلا أنه يحتوي على عيوب مميتة نسبيًا:
لذلك ، قد يكون لهذه المقالة تفسيرات أقل نسبيًا على التصميم ، وهو أكثر حول حل المشكلتين أعلاه. أعتقد أنه طالما تم حل المشكلتين أعلاه ، سيكون هذا التصميم أسهل نسبيًا.
بشكل عام ، تستخدم التخطيطات المرنة النسب المئوية لتعيين عرض الحاوية. سيؤدي هذا تلقائيًا إلى تكييف عرض الشاشة. ومع ذلك ، لا يمكن تحجيم قيمة العرض بحرية من قبل المستخدم. يجب أن نحصر الحد الأدنى لعرضه في هذا العرض المئوي. عندما يقلل المستخدم النافذة إلى قيمة معينة ، لن يتم تحجيم النافذة مرة أخرى.
يعرف الأصدقاء الذين يعرفون CSS أن هناك أربع سمات مثل هذه:
هذه السمات الأربع يمكن أن تحل هذه المشكلة. هل انت سعيد لكن لا تكون مشغولاً. على الرغم من أنها يمكن أن تحل هذه المشكلة ، إلا أن هناك مشكلة خطيرة. لا يدعم المستعرض IE6 ، وهو الأكثر استخدامًا من قبل المستخدمين ، هذه السمات. هذا شيء سيء للغاية. لا يمكننا تجاهل المتصفح مع معظم المستخدمين!
هناك أربع طرق شائعة على الإنترنت لحل المشكلة التي يدعم IE6 هذه السمات الأربع:
الثلاثة الأولى لديهم عيوب ، يرجى اختيار الطريقة الأنسب. أنا أفضل آخر واحد. هذا يتحقق من قبل أجنبي عظيم. يمكنك رؤية الأمثلة ذات الصلة هنا: http://www.doxdesk.com/software/js/minmax.html
مع ملف JS هذا ، تحتاج فقط إلى استدعاء ملف JS هذا في الرأس.
ملاحظة: للراحة في نموذج العرض التوضيحي ، أسمي هذا JS كمرجع داخلي. في التطبيق الفعلي ، ستقوم بإنشاء ملف JS هذا في ملف JS الخارجي ، واتصل به على النحو التالي:
<script type = text/javaScript src = minmax.js> </script>
نحن فقط نطبق دقيقة على الحاونيتين #wrapper و #footer في ورقة الأنماط ، وضبط عرضها على 100 ٪ على التوالي. نعم. الآن قمنا بحل مشكلة الحد الأدنى للعرض.