การออกแบบเว็บที่ตอบสนอง - คำสั่งสื่อ
สื่อ (Media) ได้นำแบบสอบถามใน CSS3 A: คำสั่ง @media CSS3
ใช้คำสั่ง @media คุณสามารถกำหนดรูปแบบที่แตกต่างกันสำหรับประเภทสื่อที่แตกต่างกัน
ตัวอย่าง
ถ้าหน้าต่างเบราว์เซอร์มีขนาดเล็กกว่า 500px, พื้นหลังจะเปลี่ยนเป็นสีฟ้าอ่อน:
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) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
ลอง»
ลำดับความสำคัญสำหรับการออกแบบสถานีเคลื่อนที่
ลำดับความสำคัญหมายถึงเดสก์ท็สิ้นการเคลื่อนย้ายและอุปกรณ์อื่น ๆ ที่ออกแบบมาเพื่อให้ความสำคัญกับการออกแบบสถานีเคลื่อนที่
ซึ่งหมายความว่าเราจะต้องทำให้การเปลี่ยนแปลงบางอย่างใน CSS
เราหน้าจอน้อยกว่า 768px ในการเปลี่ยนแปลงรูปแบบจะต้องมีการปรับเปลี่ยนในลักษณะเดียวกันเมื่อหน้าจอกว้างกว่า 768px ต่อไปนี้เป็นตัวอย่างของการจัดลำดับความสำคัญในตอนท้ายมือถือ:
[ระดับ * = "จะเก็บรวบรวม"] {
ความกว้าง: 100%;
}
@media เพียงหน้าจอและ (นาทีความกว้าง : 768px) {
/ * สำหรับเดสก์ทอป: * /
.col-1 {กว้าง: 8.33% ;}
.col-2 {กว้าง: 16.66% ;}
.col-3 {กว้าง: 25% ;}
.col-4 {กว้าง: 33.33% ;}
.col-5 {กว้าง: 41.66% ;}
.col-6 {กว้าง: 50% ;}
.col-7 {กว้าง: 58.33% ;}
.col-8 {กว้าง: 66.66% ;}
.col-9 {ความกว้าง: 75% ;}
.col-10 {กว้าง: 83.33% ;}
.col-11 {กว้าง: 91.66% ;}
.col-12 {ความกว้าง: 100% ;}
}
จุดพักอื่น ๆ
คุณสามารถเพิ่มจุดพักตามความต้องการของพวกเขา
นอกจากนี้เรายังสามารถแท็บเล็ตและโทรศัพท์มือถืออุปกรณ์ตั้งจุดพัก
สก์ท็อป
ยาเม็ด
อุปกรณ์มือถือ
600px หน้าจอเมื่อมีการเพิ่มคำสั่งสื่อและการตั้งค่ารูปแบบใหม่ ( แต่น้อยกว่าหน้าจอมีขนาดใหญ่กว่า 600px 768px):
ตัวอย่าง
โปรดทราบว่ารูปแบบที่สองชั้นเหมือนกัน แต่ชื่อที่แตกต่างกัน (จะเก็บรวบรวมและ Col-M-):
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 { width: 8.33%; }
.col-m-2 { width: 16.66%; }
.col-m-3 { width: 25%; }
.col-m-4 { width: 33.33%; }
.col-m-5 { width: 41.66%; }
.col-m-6 { width: 50%; }
.col-m-7 { width: 58.33%; }
.col-m-8 { width: 66.66%; }
.col-m-9 { width: 75%; }
.col-m-10 { width: 83.33%; }
.col-m-11 { width: 91.66%; }
.col-m-12 { width: 100%; }
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.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
สำหรับเดสก์ทอป:
เป็นครั้งแรกและส่วนที่สามซึ่งประกอบไปด้วยสาม ส่วนระดับกลางข้ามโดเมน 6
สำหรับอุปกรณ์แท็บเล็ต
คนแรกที่ข้ามโดเมนที่ 3 ส่วนที่สองซึ่งประกอบไปด้วย 9 ส่วนที่สามของข้ามโดเมน 12:
<div class = "Col-3 Col-M-3"> ... </ div>
<div class = "Col-6 Col-M-9"> ... </ div>
<ระดับ Div = "Col-3 Col-M-12"> ... </ div>
</ div>
ทิศทาง: หน้าจอแนวนอน / แนวตั้งหน้าจอ
บวกกับคำสั่งสื่อ CSS คุณสามารถสร้างปรับให้เข้ากับการวางแนวทางที่แตกต่างกันของอุปกรณ์ (แนวนอนแนวนอนแนวตั้งแนวอื่น ๆ ) รูปแบบ
ไวยากรณ์:
orientation：portrait | landscape
- ภาพ: ระบุอุปกรณ์ส่งออกในภูมิภาคที่มองเห็นได้ของความสูงของหน้ามีค่ามากกว่าหรือเท่ากับความกว้าง
- ภูมิทัศน์: ค่าของสถานการณ์ภาพระหว่างที่มีภูมิทัศน์
ตัวอย่าง
ถ้าพื้นหลังหน้าจอในแนวตั้งจะเป็นแสงสีฟ้า:
ร่างกาย {
สีพื้นหลัง: lightblue;
}
}
ลอง»