คอร์ส IT พื้นฐาน CSS 033_เลย์เอาต์แบบตอบสนอง

เลย์เอาต์แบบตอบสนอง

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

Media Queries

การใช้ CSS media queries สามารถนำสไตล์ที่แตกต่างกันไปใช้ตามลักษณะของอุปกรณ์ (เช่น ความกว้างของหน้าจอ ความสูง ประเภทของอุปกรณ์ ฯลฯ) สิ่งนี้ทำให้คุณสามารถกำหนดเลย์เอาต์ที่แตกต่างกันสำหรับขนาดหน้าจอที่แตกต่างกัน

ตัวอย่าง:

1
/* PC */
2
@media (min-width: 992px) {
3
    * {
4
        background: yellow
5
    }
6
}
7
/* แท็บเล็ต */
8
@media (min-width: 768px) and (max-width: 992px) {
9
    * {
10
        background: red
11
    }
12
}
13
/* โทรศัพท์ทั่วไป */
14
@media (min-width: 576px) and (max-width: 768px) {
15
    * {
16
        background: green
17
    }
18
}
19
/* อุปกรณ์จอเล็ก */
20
@media (max-width: 576px) {
21
    * {
22
       background: blue
23
    }
24
}

ผลลัพธ์:

รูปภาพแบบตอบสนอง

ใช้ max-width: 100%; เพื่อให้แน่ใจว่ารูปภาพและองค์ประกอบสื่อจะไม่เกินคอนเทนเนอร์บนหน้าจอขนาดเล็ก ตัวอย่าง:

1
    img {
2
      max-width: 100%; /* ความกว้างสูงสุดของรูปภาพคือ 100% ขององค์ประกอบที่บรรจุ */
3
      height: auto;    /* รักษาอัตราส่วน ป้องกันการบิดเบี้ยวของรูปภาพ */
4
    }
5

6
    /* ปรับขนาดรูปภาพบนหน้าจอขนาดเล็ก */
7
    @media screen and (max-width: 600px) {
8
      img {
9
        max-width: 50%; /* ความกว้างสูงสุดของรูปภาพคือ 50% ขององค์ประกอบที่บรรจุ */
10
      }
11
    }

1
    <img src="zhaojian.jpg" alt="Responsive Image">

ผลลัพธ์:

การตั้งค่า Viewport

ใช้แท็ก <meta> เพื่อตั้งค่า viewport เพื่อให้แน่ใจว่าหน้าเว็บจะปรับขนาดอย่างถูกต้องบนอุปกรณ์มือถือ

ตัวอย่าง:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

แท็ก meta นี้บอกเบราว์เซอร์มือถือว่าควรตั้งค่าความกว้างของ viewport เป็นความกว้างของอุปกรณ์ ขยายเอกสารเป็น 100% ของขนาดที่คาดหวัง และแสดงเอกสารในขนาดที่ปรับให้เหมาะสมสำหรับมือถือ

นอกจากแท็ก meta viewport แล้ว คุณยังสามารถใช้การตั้งค่าอื่นๆ ได้ แต่โดยทั่วไปบรรทัดข้างต้นคือสิ่งที่คุณต้องการใช้

• initial-scale: ตั้งค่าการซูมเริ่มต้นของหน้าเว็บ ตั้งค่าเป็น 1
• height: ตั้งค่าความสูงเฉพาะสำหรับ viewport
• minimum-scale: ตั้งค่าระดับการซูมขั้นต่ำ
• maximum-scale: ตั้งค่าระดับการซูมสูงสุด
• user-scalable: หากตั้งค่าเป็น no จะบล็อกการซูม

หลีกเลี่ยงการใช้ minimum-scale, maximum-scale โดยเฉพาะอย่างยิ่งการตั้งค่า user-scalable เป็น no เพื่อให้ผู้ใช้สามารถย่อขยายด้วยตนเองได้