ด้วยความนิยมอย่างรวดเร็วของอุปกรณ์พกพา ผู้ใช้จึงไม่เพียงแค่ใช้คอมพิวเตอร์แบบดั้งเดิมในการเรียกดูเนื้อหาเว็บอีกต่อไป ผู้ใช้จำนวนมากขึ้นเรื่อย ๆ เริ่มใช้สมาร์ทโฟน แท็บเล็ต หรืออุปกรณ์อื่น ๆ ในขนาดต่าง ๆ เพื่อเรียกดูเนื้อหาเว็บ ผู้ใช้อุปกรณ์ต่าง ๆ จะได้รับประสบการณ์ที่ดี ต้องใช้สื่อสืบค้น
การสืบค้นสื่อเป็นหนึ่งในฟังก์ชันที่สำคัญที่สุดของสไตล์ชีต CSS ที่เรียกว่าการสืบค้นสื่อหมายถึงการแยกความแตกต่างของอุปกรณ์ต่างๆ (เช่น คอมพิวเตอร์ โทรศัพท์มือถือ แท็บเล็ต อุปกรณ์อักษรเบรลล์ ฯลฯ) ตามประเภทสื่อที่แตกต่างกัน (ประเภทอุปกรณ์) และเงื่อนไข และกำหนดสไตล์ CSS ที่แตกต่างกันตามลำดับ ข้อความค้นหาสื่อช่วยให้ CSS ทำงานบนอุปกรณ์ที่แตกต่างกันหรือเงื่อนไขที่แตกต่างกันบนอุปกรณ์เดียวกันได้แม่นยำยิ่งขึ้น เพื่อให้ผู้ใช้ทุกคนได้รับประสบการณ์การใช้งานที่ดี
1. ประเภทสื่อ
ประเภทสื่อใช้เพื่อแสดงหมวดหมู่อุปกรณ์ CSS ให้คำสำคัญบางคำเพื่อแสดงประเภทสื่อต่างๆ ดังที่แสดงในตารางต่อไปนี้:
2. คุณลักษณะของสื่อ
นอกเหนือจากประเภทเฉพาะแล้ว คุณลักษณะเฉพาะของอุปกรณ์ยังสามารถอธิบายผ่านคุณลักษณะบางอย่าง เช่น ความกว้าง ความสูง ความละเอียด ฯลฯ ดังที่แสดงในตารางต่อไปนี้:
3. ตัวดำเนินการเชิงตรรกะ
ตัวดำเนินการเชิงตรรกะประกอบด้วย not และ และเท่านั้น การสืบค้นสื่อที่ซับซ้อนสามารถสร้างขึ้นได้ผ่านตัวดำเนินการเชิงตรรกะ คุณยังสามารถแยกการสืบค้นสื่อหลายรายการด้วยเครื่องหมายจุลภาคและรวมเข้าด้วยกันเป็นกฎเดียว
และ: ใช้เพื่อรวมการสืบค้นสื่อหลายรายการไว้ในการสืบค้นสื่อเดียว เมื่อกฎการสืบค้นแต่ละกฎเป็นจริง การสืบค้นสื่อจะเป็นจริง นอกจากนี้ ตัวดำเนินการ และ ยังสามารถรวมคุณลักษณะของสื่อและประเภทสื่อได้ด้วย
ไม่: ใช้เพื่อปฏิเสธการสืบค้นสื่อ เมื่อกฎการสืบค้นไม่เป็นความจริง จะส่งกลับค่าจริง มิฉะนั้นจะส่งคืนค่าเท็จ หากใช้ตัวดำเนินการ not จะต้องระบุประเภทสื่อสิ่งพิมพ์ด้วย
เท่านั้น: จะมีผลก็ต่อเมื่อแบบสอบถามทั้งหมดตรงกัน เมื่อไม่ได้ใช้ only เบราว์เซอร์รุ่นเก่าจะตีความหน้าจอและ (ความกว้างสูงสุด: 500px) เป็นหน้าจอ โดยไม่สนใจส่วนที่เหลือของแบบสอบถาม และใช้สไตล์กับหน้าจอทั้งหมด หากคุณใช้ตัวดำเนินการเพียงตัวเดียว คุณต้องระบุประเภทสื่อสิ่งพิมพ์ด้วย
4. กำหนดการสืบค้นสื่อ
ในปัจจุบัน คุณสามารถกำหนดการสืบค้นสื่อได้สองวิธี:
ใช้กฎ @media หรือ @import เพื่อระบุประเภทอุปกรณ์ที่เกี่ยวข้องในสไตล์ชีต
ใช้แอตทริบิวต์สื่อเพื่อระบุประเภทอุปกรณ์เฉพาะใน <style>, <link>, <source> หรือองค์ประกอบ HTML อื่น ๆ
(1)@สื่อ
เราได้ดู @media สั้น ๆ ในส่วน "CSS @Rules" การใช้ @media คุณสามารถระบุชุดของการสืบค้นสื่อและบล็อกสไตล์ CSS ได้ หากการสืบค้นสื่อตรงกับอุปกรณ์ที่ใช้งานอยู่ สไตล์ CSS ที่ระบุ จะถูกนำไปใช้กับเอกสาร รหัสตัวอย่างมีดังนี้:
/*บนหน้าจอที่น้อยกว่าหรือเท่ากับ 992 พิกเซล ให้ตั้งค่าสีพื้นหลังเป็นสีน้ำเงิน*/@mediascreenand(max-width:992px){body{พื้นหลัง-สี:สีน้ำเงิน;}}/*บนหน้าจอ 600 พิกเซลหรือน้อยกว่า บน หน้าจอ ตั้งค่าสีพื้นหลังเป็นมะกอก */@mediascreenand(max-width:600px){body{พื้นหลัง-สี:มะกอก;}}(2) @นำเข้า
@import ใช้เพื่อนำเข้าไฟล์สไตล์ภายนอกที่ระบุและระบุประเภทสื่อเป้าหมาย รหัสตัวอย่างจะเป็นดังนี้:
@importurl(css/screen.css)screen;/*แนะนำสไตล์ภายนอก สไตล์นี้จะใช้ได้กับจอคอมพิวเตอร์เท่านั้น*/@importurl(css/print.css)print;/*แนะนำสไตล์ภายนอก สไตล์นี้จะเป็นเพียง นำไปใช้กับอุปกรณ์การพิมพ์*/body{พื้นหลัง:#f5f5f5;line-height:1.2;}หมายเหตุ: คำสั่ง @import ทั้งหมดจะต้องปรากฏที่จุดเริ่มต้นของสไตล์ชีต และสไตล์ที่กำหนดไว้ในสไตล์ชีตจะแทนที่สไตล์ที่ขัดแย้งกันในสไตล์ชีตภายนอกที่นำเข้า
(3) คุณลักษณะของสื่อ
คุณยังสามารถกำหนดการสืบค้นสื่อในแอตทริบิวต์สื่อของ <style>, <link>, <source> และแท็กอื่นๆ ได้ โค้ดตัวอย่างจะเป็นดังนี้:
/*ใช้สไตล์นี้เมื่อความกว้างของหน้ามากกว่าหรือเท่ากับ 900 พิกเซล*/<linkrel=stylesheetmedia=screenand(min-width:900px)href=widescreen.css>/*ใช้สไตล์นี้เมื่อความกว้างของหน้าน้อยกว่า หรือเท่ากับ 600 พิกเซล*/< linkrel=stylesheetmedia=screenand(max-width:600px)href=smallscreen.css>
เคล็ดลับ: คุณยังสามารถระบุสื่อหลายประเภทในแอตทริบิวต์สื่อได้ โดยใช้เครื่องหมายจุลภาคเพื่อแยกสื่อแต่ละประเภท เช่น media=screen, print