การออกแบบเว็บไซต์ที่ตอบสนองได้ - การค้นหา media
- หน้าก่อน ตารางเครือข่าย RWD
- หน้าต่อไป รูปภาพ RWD
อะไรคือคำสั่งค้นหาสื่อ？
คำสั่งค้นหาสื่อเป็นเทคโนโลยี CSS ที่ถูกนำเสนอใน CSS3
มันจะถูกใช้เมื่อมีเงื่อนไขเฉพาะ @media กฎเพื่ออ้างบล็อคความสัมพันธ์ CSS รายการ
ตัวอย่าง
หากหน้าต่างบราวเซอร์เป็น 600px หรือน้อยกว่า กำหนดสีพื้นหลังเป็นสีสันทองน้ำ
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
เพิ่มจุดหยุด
ในช่วงแรกของทัวร์นี้เราได้สร้างหน้าเว็บที่มีบรรทัดและคอลัมน์ แต่หน้าเว็บนี้มีลักษณะที่ไม่ดีบนหน้าจอเล็ก
คำสั่งค้นหาสื่อช่วยคุณ พวกเราสามารถเพิ่มจุดหยุดซึ่งบางส่วนของการออกแบบจะแสดงต่างกันที่แนวที่แบ่งจุดหยุด
คอมพิวเตอร์เดสก์ทอป
มือถือ
ใช้คำสั่งค้นหาสื่อเพื่อเพิ่มจุดหยุดที่ 768px：
ตัวอย่าง
เมื่อความกว้างของหน้าจอ (หน้าต่างบราวเซอร์) ต่ำกว่า 768px ความกว้างของแต่ละคอลัมน์ควรเป็น 100%：
/* สำหรับอุปกรณ์เดสก์ทอป： */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* สำหรับโทรศัพท์มือถือ: */
[class*="col-"] {
width: 100%;
}
}
การออกแบบยิ่งใหญ่ของหลักที่มือถือเสมอ
ใช้หลักที่มือถือ (Mobile First) หมายถึงการออกแบบสำหรับเครื่องคอมพิวเตอร์หรืออุปกรณ์อื่นก่อนด้วยเครื่องมือถือ (นี่จะทำให้หน้าเว็บแสดงรวดเร็วยิ่งขึ้นบนอุปกรณ์ที่เล็กมากกว่า)
นี่หมายความว่าพวกเราต้องปรับปรุง CSS ของเรา
เมื่อความกว้างต่ำกว่า 768px พวกเราควรปรับปรุงการออกแบบแทนที่จะเปลี่ยนความกว้าง เราได้ทำนั้นแบบ "ใช้หลักที่มือถือ" ดังนี้：
ตัวอย่าง
/* สำหรับโทรศัพท์มือถือ: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* สำหรับเครื่องพีซี: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
จุดหยุดอื่น
คุณสามารถเพิ่มจุดหยุดเท่าที่คุณต้องการ。
เรายังจะใส่จุดหยุดระหว่างแทบเล็ตและมือถือ。
คอมพิวเตอร์เดสก์ทอป
แทบเล็ต
มือถือ
ดังนั้นเราเพิ่มคำสั่งค้นหาสื่อ (บน 600 พิกเซล) และเพิ่มกลุ่มคลาสใหม่สำหรับอุปกรณ์ที่มีพิกเซลมากกว่า 600 แต่น้อยกว่า 768 พิกเซล：
ตัวอย่าง
โปรดเก็บใจว่า ชั้นทั้งสองเหมือนกันเกือบทุกอย่าง แต่แตกต่างกันเพียงชื่อเดียว (col- และ col-s-):
/* สำหรับโทรศัพท์มือถือ: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* สำหรับเครื่องพีซีเทคนิค: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* สำหรับเครื่องพีซี: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
มันดูเหมือนว่าจะมีชั้นที่เหมือนกันกันสองกลุ่มมากไปด้วย แต่มันทำให้เรามีโอกาสใช้ HTML ในการตัดสินว่าจะเกิดอะไรกับคอลัมน์ในจุดหยุดแบ่งของแต่ละคอลัมน์:
ตัวอย่าง HTML
สำหรับเครื่องตั้งโต๊ะ:
ส่วนแรกและส่วนที่สามจะครอบคลุม 3 คอลัมน์ ส่วนกลางจะครอบคลุม 6 คอลัมน์。
สำหรับเครื่องพีซีเทคนิค:
ส่วนแรกจะครอบคลุม 3 คอลัมน์ ส่วนที่สองจะครอบคลุม 9 คอลัมน์ ส่วนที่สามจะแสดงที่ด้านล่างของส่วนแรกและที่สอง และจะครอบคลุม 12 คอลัมน์：
<div class="row"> <div class="col-3 col-s-3">...</div> <div class="col-6 col-s-9">...</div> <div class="col-3 col-s-12">...</div> </div>
breakpoint ของอุปกรณ์โดยทั่วไป
มีหลายรูปแบบหน้าจอและอุปกรณ์ที่มีความสูงและความกว้างต่างๆ มากมาย ดังนั้นจึงยากที่จะสร้าง breakpoint ที่เหมาะสมสำหรับแต่ละอุปกรณ์ เพื่อง่ายขึ้น คุณสามารถเลือกห้ากลุ่มนี้:
ตัวอย่าง
/* อุปกรณ์ขนาดย่อม (โทรศัพท์ ที่มีขนาด 600px และขนาดเล็กกว่า) */
@media only screen and (max-width: 600px) {...}
/* อุปกรณ์ขนาดเล็ก (ตั้งโต๊ะมุมมองตั้งและโทรศัพท์มือถือใหญ่ ที่มีขนาด 600 พิกเซลและขนาดใหญ่กว่า) */
@media only screen and (min-width: 600px) {...}
/* อุปกรณ์ขนาดกลาง (ตั้งโต๊ะมุมมองข้าง ที่มีขนาด 768 พิกเซลและขนาดใหญ่กว่า) */
@media only screen and (min-width: 768px) {...}
/* อุปกรณ์ขนาดใหญ่ (คอมพิวเตอร์โล่งและเครื่องคอมพิวเตอร์เดสก์ที่มีขนาด 992px และขนาดใหญ่กว่า) */
@media only screen and (min-width: 992px) {...}
/* อุปกรณ์ขนาดใหญ่ (เครื่องคอมพิวเตอร์เดสก์และเครื่องคอมพิวเตอร์โล่งที่มีขนาด 1200px และขนาดใหญ่กว่า) */
@media only screen and (min-width: 1200px) {...}
มุมมอง: ภาพถ่าย/สายแสง
media query ยังสามารถใช้เพื่อเปลี่ยนรูปแบบหน้าเว็บตามที่มุมมองของเบราวเซอร์:
คุณสามารถตั้งค่าคุณสมบัติ CSS กลุ่มหนึ่ง ซึ่งมีผลเมื่อความกว้างของหน้าต่างบราวเซอร์มากกว่าความสูง หรือที่เรียกว่า 'โหมดมุมมองนอกฝั่ง':
ตัวอย่าง
ถ้าที่อยู่ในโหมดมุมมองนอกฝั่ง (landscape mode) หน้าเว็บจะมีพื้นหลังที่เป็นสีน้ำเงินสะวันนา:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
ซ่อนองค์ประกอบด้วย media query
แบบใช้งานที่ระบุกันดีของ media query คือการซ่อนองค์ประกอบในขนาดหน้าจอต่างๆ:
ตัวอย่าง
/* ถ้าขนาดหน้าจอเท่ากับ 600 พิกเซลหรือน้อยกว่า โปรดซ่อนองค์ประกอบนี้ */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
แก้ไขขนาดตัวอักษรด้วย media query
คุณยังสามารถใช้ media query ในการเปลี่ยนขนาดของตัวอักษรสำหรับตัวเลือกที่มีขนาดหน้าจอต่างๆ:
ตัวอย่าง
/* ถ้าขนาดหน้าจอเท่ากับ 601px หรือใหญ่กว่า โปรดตั้ง font-size ของ <div> ที่ 80px */
@media only screen and (min-width: 601px) {}}
div.example {
font-size: 80px;
}
}
/* หากขนาดหน้าจอเป็น 600px หรือน้อยกว่า โปรดตั้ง font-size ของ <div> ให้เป็น 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
คู่มืออ้างอิง CSS @media
สรุปเกี่ยวกับทั้งหมดสื่อมีสาระและคุณสมบัติ/การแสดงที่เต็มตัว โปรดดูที่ อ่านเกี่ยวกับ @media กฎในคู่มืออ้างอิง CSS.
- หน้าก่อน ตารางเครือข่าย RWD
- หน้าต่อไป รูปภาพ RWD
