หากหน้าที่สร้างในบล็อกสากลดูดีบนคอมพิวเตอร์ แต่เว็บไซต์จะแสดงผลไม่ถูกต้องบนหน้าจอมือถือหรือแท็บเล็ต เนื่องจากขนาดของอุปกรณ์เหล่านี้แตกต่างกัน
ข้อมูลสำคัญ
ในบล็อกสากล คุณต้องตั้งค่าการปรับให้เหมาะสมสำหรับแท็บเล็ตและโทรศัพท์ในแนวนอนและแนวตั้ง
- สำหรับคอมพิวเตอร์ ขนาดบล็อกคือ 1200px
- แท็บเล็ตในแนวนอนคือ 960px
- แท็บเล็ตในแนวตั้งคือ 640px
- โทรศัพท์ในแนวนอนคือ 480px
- โทรศัพท์ในแนวตั้งคือ 320px
มีเครื่องมือในบล็อกสำหรับสิ่งนี้ ซึ่งเมื่อสลับจะแสดงขนาดของหน้าโดยอัตโนมัติ ซึ่งองค์ประกอบทั้งหมดของเว็บไซต์ที่สร้างขึ้นควรพอดี: ข้อความ รูปร่าง ปุ่ม วิดีโอ ฯลฯ
ในตอนแรก เราสร้างการออกแบบสำหรับหน้าจอขนาดใหญ่ (คอมพิวเตอร์)
หลังจากนั้น เราเริ่มปรับหน้าที่สร้างขึ้น โดยเริ่มจากแท็บเล็ตในแนวนอน และต่อไปเรื่อยๆ โดยใช้แถบเครื่องมือในบล็อก ปรับขนาดข้อความและองค์ประกอบเพื่อไม่ให้เกินขอบเขตของบล็อก มิฉะนั้นจะไม่ปรากฏบนอุปกรณ์ของผู้ใช้เว็บไซต์
นี่คือตัวอย่างบางส่วนว่าหน้าควรมีลักษณะอย่างไรสำหรับแต่ละขนาด:
แท็บเล็ตในแนวนอน 960px
แท็บเล็ตในแนวตั้ง 640px
โทรศัพท์ในแนวนอน 480px
โทรศัพท์ในแนวตั้ง 320px
บล็อกพื้นฐานทั้งหมดในตัวสร้างเว็บไซต์จะปรับให้เข้ากับขนาดหน้าจอที่ต้องการโดยอัตโนมัติ อ่านเกี่ยวกับบล็อกพื้นฐานในบทความต่อไปนี้