แผนเค้าโครงหน้าเว็บ: เลย์เอาต์ของเหลวยืดหยุ่น

ในบทความอื่นในบทความของฉัน "Elastic + Layout ความกว้างคงที่" ฉันแนะนำแผนเลย์เอาต์ที่มีความยืดหยุ่นบวกกับความกว้างคงที่ขั้นต่ำและตอนนี้ฉันจะแนะนำแผนเลย์เอาต์อื่น - เลย์เอาต์ของเหลวยืดหยุ่น

โซลูชันนั้นเป็นแอปพลิเคชั่นที่ยืดหยุ่นของเค้าโครงนี้ ข้อได้เปรียบที่ใหญ่ที่สุดของเค้าโครงยืดหยุ่นคือมันสามารถใช้ประโยชน์จากพื้นที่หน้าจอได้อย่างเต็มที่ ไม่ว่าความละเอียดของลูกค้าจะมีขนาดใหญ่เพียงใดก็สามารถปรับให้เข้ากับการเปลี่ยนแปลงของความกว้างได้โดยอัตโนมัติ

รูปภาพ 1

ดูภาพด้านบน นี่คือเว็บไซต์ต่างประเทศ มันเป็นเค้าโครงความกว้างคงที่ เลย์เอาต์ของเราขึ้นอยู่กับภาพนี้ แน่นอนฉันจะไม่ให้คำแนะนำที่ครอบคลุมเกี่ยวกับวิธีการทำให้หน้าสมบูรณ์นี้ฉันจะอธิบายเฉพาะประเด็นสำคัญเท่านั้น

ในความเป็นจริงมันค่อนข้างง่ายที่จะสร้างเค้าโครงยืดหยุ่น แต่ถึงแม้ว่าเลย์เอาต์นี้จะง่าย แต่การเข้าใจรายละเอียดเป็นสาระสำคัญของเค้าโครงนี้ แม้ว่าเลย์เอาต์ยืดหยุ่นมีข้อได้เปรียบที่ดีเช่นนี้ แต่ก็มีข้อบกพร่องที่ค่อนข้างร้ายแรง:

1. หากคุณไม่ได้ตั้งค่าความกว้างขั้นต่ำสำหรับเค้าโครงนี้มันจะมีผลกระทบร้ายแรงต่อเลย์เอาต์เมื่อผู้ใช้หดหน้าต่างให้เล็กลงอย่างเพียงพอ ทำให้เกิดผลกระทบอย่างรุนแรงต่อการจัดวางที่ไม่ถูกต้อง
2. เมื่อหน้าถูกวางอย่างยืดหยุ่นมันจะมีผลกระทบอย่างมากต่อรูปภาพภายใน เนื่องจากจนถึงตอนนี้ปัญหาของการปรับขนาดภาพด้วยเปอร์เซ็นต์ยังไม่ได้รับการแก้ไข

   ดังนั้นบทความนี้อาจมีคำอธิบายที่ค่อนข้างน้อยเกี่ยวกับการจัดวางและเป็นเรื่องเกี่ยวกับการแก้ปัญหาสองข้อข้างต้น ฉันเชื่อว่าตราบใดที่ปัญหาทั้งสองข้างต้นได้รับการแก้ไขเลย์เอาต์นี้จะค่อนข้างง่าย

โดยทั่วไปเลย์เอาต์ยืดหยุ่นใช้เปอร์เซ็นต์เพื่อตั้งค่าความกว้างของภาชนะ สิ่งนี้จะปรับให้เข้ากับความกว้างของหน้าจอโดยอัตโนมัติ อย่างไรก็ตามค่าความกว้างไม่สามารถปรับขนาดได้อย่างสมบูรณ์โดยผู้ใช้ เราต้อง จำกัด ความกว้างขั้นต่ำในความกว้างเปอร์เซ็นต์นี้ เมื่อผู้ใช้หดหน้าต่างเป็นค่าที่แน่นอนหน้าต่างจะไม่ถูกปรับขนาดอีกครั้ง

เพื่อนที่คุ้นเคยกับ CSS รู้ว่ามีคุณลักษณะสี่อย่างเช่นนี้:

• ความกว้างขั้นต่ำ: ความกว้างขั้นต่ำ
• ความกว้างสูงสุด: ความกว้างสูงสุด
• ความสูงขั้นต่ำ: ความสูงขั้นต่ำ
• ความสูงสูงสุด: ความสูงสูงสุด

คุณลักษณะทั้งสี่นี้สามารถแก้ปัญหานี้ได้ คุณมีความสุข? แต่อย่ายุ่ง แม้ว่าพวกเขาจะสามารถแก้ปัญหานี้ได้ แต่ก็มีปัญหาร้ายแรง เบราว์เซอร์ IE6 ซึ่งเป็นผู้ใช้ที่ใช้มากที่สุดไม่สนับสนุนคุณลักษณะเหล่านี้ นี่เป็นสิ่งที่แย่มาก เราไม่สามารถทิ้งเบราว์เซอร์กับผู้ใช้มากที่สุด!

มีวิธีการที่ได้รับความนิยมสี่วิธีบนอินเทอร์เน็ตเพื่อแก้ปัญหาที่ IE6 สนับสนุนคุณลักษณะทั้งสี่นี้:

1. การแสดงออกใน CSS เพื่อตั้งค่าความกว้างขั้นต่ำซึ่งมีค่าใช้จ่ายหน่วยความจำมากขึ้น
2. ใช้ DIV ที่ซ้อนกันแล้วใช้การเลียนแบบการชดเชยระยะขอบเพื่อใช้โครงสร้างแบบหลายสาย
3. นำไปใช้กับ JQ Framework และการเพิ่มกรอบ JS ลงในอสังหาริมทรัพย์นั้นไม่ได้ประโยชน์เล็กน้อย
4. นำไปใช้กับรหัส JS บริสุทธิ์

สามคนแรกมีข้อเสียโปรดเลือกวิธีที่เหมาะสมที่สุด ฉันชอบคนสุดท้าย นี่คือความสำเร็จโดยชาวต่างชาติที่ยิ่งใหญ่ คุณสามารถดูตัวอย่างที่เกี่ยวข้องได้ที่นี่: http://www.doxdesk.com/software/js/minmax.html

ด้วยไฟล์ JS นี้คุณจะต้องเรียกไฟล์ JS นี้ในส่วนหัวเท่านั้น

PS: เพื่อความสะดวกในรูปแบบการสาธิตฉันเรียกสิ่งนี้ว่า JS เป็นข้อมูลอ้างอิงภายใน ในแอปพลิเคชันจริงคุณจะสร้างไฟล์ JS นี้ลงในไฟล์ภายนอก JS และเรียกมันว่าดังนี้:

<script type = text/javascript src = minmax.js> </script>

เราเพิ่งใช้ความกว้างขั้นต่ำกับตู้คอนเทนเนอร์สองตัว #Wrapper และ #Footer ในแผ่นสไตล์และตั้งค่าความกว้างเป็น 100% ตามลำดับ ตกลง. ตอนนี้เราได้แก้ไขปัญหาความกว้างขั้นต่ำ