ข้อความค้นหา @media ของ CSS3 เป็นคุณลักษณะที่มีประสิทธิภาพที่ช่วยให้เราใช้กฎสไตล์ที่แตกต่างกันโดยอิงตามประเภทสื่อและคุณลักษณะของอุปกรณ์ที่แตกต่างกัน สิ่งนี้ช่วยให้เราสร้างการออกแบบที่ตอบสนองเพื่อให้แน่ใจว่าเว็บไซต์หรือแอปมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมบนอุปกรณ์และขนาดหน้าจอที่หลากหลาย บทความนี้จะกล่าวถึงคำจำกัดความ ไวยากรณ์ สถานการณ์การใช้งาน และปัญหาทั่วไปของการสืบค้น @media โดยละเอียด
กฎ @media ของ CSS3 อนุญาตให้คุณใช้กฎสไตล์ที่แตกต่างกันตามประเภทสื่อและคุณสมบัติของสื่อ ประเภทสื่อ (ประเภทสื่อ) เช่น screen (หน้าจอ) print (พิมพ์) ฯลฯ ในขณะที่คุณลักษณะสื่อ (คุณลักษณะสื่อ) เช่น width height orientation ฯลฯ ใช้เพื่ออธิบายคุณลักษณะเฉพาะของอุปกรณ์
ไวยากรณ์พื้นฐานของแบบสอบถาม @media เป็นดังนี้:
@media mediatype และ | ไม่ใช่ | เท่านั้น (คุณสมบัติสื่อ) {
/* กฎ CSS*/
-screen , print เป็นต้น หากละไว้ จะมีค่าเริ่มต้นเป็นสื่อทุกประเภท คุณลักษณะสื่อ : กำหนดเงื่อนไขสำหรับคุณลักษณะและค่าของสื่อ เช่น min-width , max-width , orientation ฯลฯในการสืบค้น @media คุณสามารถใช้ตัวดำเนินการเชิงตรรกะต่อไปนี้เพื่อรวมเงื่อนไขของสื่อได้:
และ : แสดงว่าต้องเป็นไปตามเงื่อนไขทั้งหมด not : บ่งชี้ว่ามีการใช้สไตล์เมื่อไม่ตรงตามเงื่อนไข เท่านั้น : ใช้เพื่อป้องกันเบราว์เซอร์รุ่นเก่าที่ไม่รองรับการสืบค้นสื่อจากการนำสไตล์ไปใช้ จุลภาค : บ่งชี้ว่ามีการใช้สไตล์เมื่อตรงตามเงื่อนไขใดๆ หลายประการ1. กำหนดรูปแบบตามขนาดหน้าจอ
หน้าจอ @media และ (ความกว้างขั้นต่ำ: 600px) {
ร่างกาย {
สีพื้นหลัง: ฟ้าอ่อน;
-
-เมื่อความกว้างของหน้าจออย่างน้อย 600 พิกเซล สีพื้นหลังของหน้าจะเปลี่ยนเป็นสีฟ้าอ่อน
2. การออกแบบที่ตอบสนอง
หน้าจอ @media และ (ความกว้างสูงสุด: 800px) {
.คอนเทนเนอร์ {
ความกว้าง: 100%;
-
-
หน้าจอ @media และ (ความกว้างขั้นต่ำ: 801px) {
.คอนเทนเนอร์ {
ความกว้าง: 750px;
-
-เปลี่ยนความกว้างของคอนเทนเนอร์ตามความกว้างของหน้าจอเพื่อการออกแบบที่ตอบสนอง
3. สไตล์การพิมพ์
@media พิมพ์ {
ร่างกาย {
ขนาดตัวอักษร: 12pt;
สี: สีดำ;
พื้นหลัง: สีขาว;
-
-กำหนดสไตล์เฉพาะสำหรับการพิมพ์ เช่น ขนาดตัวอักษร สี และพื้นหลัง
4. หน้าจอแนวนอนและแนวตั้ง
หน้าจอ @media และ (การวางแนว: แนวนอน) {
#แถบด้านข้าง {
จอแสดงผล: ไม่มี;
-
-ซ่อนแถบด้านข้างเมื่ออุปกรณ์อยู่ในโหมดแนวนอน
CSS3 มีคุณสมบัติสื่อที่หลากหลาย ต่อไปนี้เป็นคุณสมบัติที่ใช้กันทั่วไป:
width , min-width , max-width : กำหนดความกว้างของพื้นที่ที่มองเห็นได้ของหน้าในอุปกรณ์ส่งออก height , min-height , max-height : กำหนดความสูงของพื้นที่ที่มองเห็นได้ของหน้าในอุปกรณ์ส่งออก การวางแนว : กำหนดการวางแนวของอุปกรณ์ เช่นportrait (หน้าจอแนวตั้ง) และ landscape (หน้าจอแนวนอน) ความละเอียด : กำหนดความละเอียดของอุปกรณ์ color , color-index : กำหนดความสามารถด้านสีและดัชนีสีmin-width และ max-width เป็นเงื่อนไขในการตัดสินใจ คุณควรตรวจสอบให้แน่ใจว่าช่วงเงื่อนไขถูกจัดเรียงจากเล็กไปใหญ่ หรือจากใหญ่ไปเล็ก เพื่อหลีกเลี่ยงปัญหาการครอบคลุมของรูปแบบ ความขัดแย้งของสไตล์ : ตรวจสอบให้แน่ใจว่าสไตล์ในการสืบค้น @media ไม่ได้ถูกแทนที่ตามกฎ CSS ที่ตามมา ขอแนะนำให้เขียนรูปแบบการสืบค้น @media ต่อท้าย เมตาแท็ก : ตั้งค่า <meta name="viewport" content="width=device-width, initial-scale=1.0"> เพื่อให้แน่ใจว่าอุปกรณ์เคลื่อนที่สามารถแสดงผลหน้าเว็บได้อย่างถูกต้อง ข้อผิดพลาดทางไวยากรณ์ : ตรวจสอบให้แน่ใจว่าไวยากรณ์ของการสืบค้น @media นั้นถูกต้อง โดยเฉพาะช่องว่างหลังตัวดำเนินการเชิงตรรกะ และอย่าเขียนตัวสิ้นสุดภายในวงเล็บเหลี่ยมข้อความค้นหา @media ของ CSS3 เป็นเครื่องมือสำคัญสำหรับการสร้างการออกแบบที่ตอบสนอง ช่วยให้เราสามารถใช้กฎสไตล์ที่แตกต่างกันตามประเภทสื่อและคุณสมบัติของสื่อที่แตกต่างกัน ด้วยการใช้ประโยชน์จากการสืบค้น @media เราสามารถมั่นใจได้ว่าเว็บไซต์หรือแอปของเรามอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมบนอุปกรณ์และขนาดหน้าจอที่หลากหลาย ฉันหวังว่าบทความนี้จะช่วยให้คุณเข้าใจและใช้คำสั่ง @media ได้ดีขึ้น
นี่เป็นการสรุปบทความเกี่ยวกับการสืบค้น @media ใน CSS3 สำหรับเนื้อหาการสืบค้น CSS3 @media เพิ่มเติม โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรือเรียกดูบทความที่เกี่ยวข้องด้านล่างต่อไป ฉันหวังว่าคุณจะสนับสนุน downcodes มากขึ้นในอนาคต