ปรับเว็บไซต์ของคุณให้พอดีกับมติทั้งหมด

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

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

ปรับเว็บไซต์ของคุณให้พอดีกับทุกหน้าจอ

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

คำจำกัดความของความกว้างสัมพัทธ์ของเว็บไซต์ทำได้ผ่าน แท็กเนื้อหา แท็กนี้สามารถปรับเปลี่ยนได้หากคุณใช้ div # body :

 ร่างกาย {ความกว้าง: 100%;} 

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

คุณสมบัติความกว้างต่ำสุดหรือสูงสุด

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

นี่คือตัวอย่างของเว็บไซต์ที่แสดงความกว้างของหน้า 90% กึ่งกลางที่มีความกว้างต่ำสุด 600 พิกเซลและความกว้างสูงสุด 2000 พิกเซล:

 ร่างกาย {ความกว้าง: 90%; margin: อัตโนมัติ; นาทีความกว้าง: 600px; ความกว้างสูงสุด: 2000 พิกเซล}