คุณเขียนข้อความ CSS Media ได้อย่างไร?

ไวยากรณ์สำหรับข้อความค้นหาสื่อทั้งความกว้างต่ำสุดและความกว้างสูงสุด

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

ข้อความค้นหาสื่อเป็นเหมือนข้อความเงื่อนไขในไฟล์ CSS ของเว็บไซต์ของคุณซึ่งช่วยให้คุณสามารถตั้งกฎ CSS บางอย่างที่จะส่งผลต่อเมื่อเงื่อนไขบางอย่างเป็นไปตามข้อกำหนดเช่นเมื่อขนาดหน้าจออยู่ด้านบนหรือด้านล่างเกณฑ์บางอย่าง

คำค้นหาสื่อในการดำเนินการ

ดังนั้นคุณจะใช้ Media Queries ในเว็บไซต์ได้อย่างไร? นี่เป็นตัวอย่างง่ายๆ

  1. คุณจะเริ่มต้นด้วยเอกสาร HTML ที่มีโครงสร้างอย่างดีและไม่มีรูปแบบภาพใด ๆ (นั่นคือสิ่งที่ CSS เป็น)
  2. ในไฟล์ CSS ของคุณคุณจะเริ่มต้นตามที่ปกติทำโดยจัดแต่งทรงผมให้กับหน้าเว็บและตั้งค่าพื้นฐานสำหรับรูปลักษณ์ของเว็บไซต์ สมมติว่าคุณต้องการให้ขนาดตัวอักษรของหน้าเป็น 16 พิกเซลคุณสามารถเขียน CSS นี้ได้: body {font-size: 16px; }
  3. ตอนนี้คุณอาจต้องการเพิ่มขนาดแบบอักษรสำหรับหน้าจอขนาดใหญ่ที่มีพื้นที่เหลือเฟือที่จะทำเช่นนั้น นี่คือที่ Media Queries เข้ามาคุณจะเริ่มการทำงานของ Media Query เช่นนี้: หน้าจอ @media และ (min-width: 1000px) {}
  4. นี่เป็นรูปแบบของ Media Query เริ่มต้นด้วย @media เพื่อสร้าง Media Query เอง ถัดไปคุณตั้งค่า "ประเภทสื่อ" ซึ่งในกรณีนี้คือ "หน้าจอ" นี่ใช้กับหน้าจอคอมพิวเตอร์เดสก์ท็อปแท็บเล็ตโทรศัพท์ ฯลฯ ในที่สุดคุณจะสิ้นสุดการสืบค้นข้อมูลสื่อด้วย "คุณลักษณะสื่อ" ในตัวอย่างข้างต้นนั่นคือ "mid-width: 1000px" ซึ่งหมายความว่า Media Query จะเริ่มต้นสำหรับการแสดงผลที่มีความกว้างไม่ต่ำกว่า 1000 พิกเซล
  1. หลังจากองค์ประกอบเหล่านี้ของ Media Query คุณจะเพิ่มการเปิดและปิดรั้งแบบหยิกคล้ายกับสิ่งที่คุณจะทำในกฎ CSS ตามปกติใด ๆ
  2. ขั้นตอนสุดท้ายในการสืบค้นข้อมูลสื่อคือการเพิ่มกฎ CSS ที่คุณต้องการใช้เมื่อพบเงื่อนไขนี้แล้ว คุณสามารถเพิ่มกฎ CSS เหล่านี้ได้ระหว่างวงเล็บปีกกาที่สร้างขึ้นใน Media Query เช่น: @media screen และ (min-width: 1000px) {body {font-size: 20px; }
  3. เมื่อเงื่อนไขของ Media Query เป็นไปตามเงื่อนไข (หน้าต่างเบราเซอร์มีความกว้างอย่างน้อย 1000 พิกเซล) สไตล์ CSS นี้จะมีผลโดยเปลี่ยนขนาดแบบอักษรของเว็บไซต์ของเราจากพิกเซล 16 พิกเซลที่เราสร้างขึ้นมาเป็นค่าใหม่ของเราที่ 20 พิกเซล

การเพิ่มสไตล์เพิ่มเติม

คุณสามารถวางกฎ CSS ได้มากมายภายใน Query Media นี้ตามต้องการเพื่อปรับรูปลักษณ์ของเว็บไซต์ของคุณ ตัวอย่างเช่นหากคุณต้องการเพิ่มขนาดตัวอักษรไม่เกิน 20 พิกเซล แต่เปลี่ยนสีของย่อหน้าทั้งหมดเป็นสีดำ (# 000000) คุณสามารถเพิ่มค่านี้ได้:

หน้าจอ @media และ (min-width: 1000px) {body {font-size: 20px; } p (สี: # 000000; }}

การเพิ่มการค้นหาสื่อเพิ่มเติม

นอกจากนี้คุณยังสามารถเพิ่ม Media Queries สำหรับทุกขนาดที่มีขนาดใหญ่เพิ่มลงในสไตล์ชีตของคุณเช่นนี้:

หน้าจอ @media และ (min-width: 1000px) {body {font-size: 20px; } p (สี: # 000000; {} หน้าจอสื่อ @ และ (min-width: 1400px) {body {font-size: 24px; }}

ข้อความค้นหาสื่อแรกจะเริ่มที่ความกว้าง 1000 พิกเซลโดยเปลี่ยนขนาดตัวอักษรเป็น 20 พิกเซล จากนั้นเมื่อเบราเซอร์สูงกว่า 1400 พิกเซลขนาดตัวอักษรจะเปลี่ยนอีกเป็น 24 พิกเซล คุณสามารถเพิ่มการสืบค้นข้อมูลสื่อได้มากเท่าที่จำเป็นสำหรับเว็บไซต์ของคุณ

ความกว้างต่ำสุดและความกว้างสูงสุด

โดยทั่วไปมีอยู่สองวิธีในการเขียน Query สื่อโดยใช้ "min-width" หรือ "max-width" จนถึงตอนนี้เราได้เห็น "min-width" ในการดำเนินการ นี่เป็นสาเหตุให้ Media Queries มีผลเมื่อเบราว์เซอร์มีค่าอย่างน้อยที่สุดที่ความกว้างขั้นต่ำ ดังนั้นแบบสอบถามที่ใช้ "min-width: 1000px" จะใช้เมื่อเบราเซอร์มีความกว้างอย่างน้อย 1000 พิกเซล สไตล์ของ Media Query นี้ใช้เมื่อคุณสร้างเว็บไซต์ด้วยลักษณะ "มือถือก่อน"

ถ้าคุณใช้ "ความกว้างสูงสุด" การทำงานในลักษณะตรงกันข้าม คำค้นหาสื่อของ "max-width: 1000px" จะใช้เมื่อเบราว์เซอร์ต่ำกว่าขนาดนี้

เกี่ยวกับเบราว์เซอร์รุ่นเก่า

ความท้าทายหนึ่งข้อกับ Media Queries คือการขาดการสนับสนุนในเวอร์ชันที่เก่ากว่าใน Internet Explorer โชคดีที่ มี polyfills ที่สามารถแก้ไขการสนับสนุน Media Queries ในเบราว์เซอร์รุ่นเก่าเหล่านี้ได้ซึ่งช่วยให้คุณสามารถใช้งานได้บนเว็บไซต์ในปัจจุบันในขณะที่ยังมั่นใจได้ว่าการแสดงผลไซต์นั้นจะดูไม่สมบูรณ์ในซอฟต์แวร์เบราว์เซอร์รุ่นเก่า

แก้ไขโดย Jeremy Girard เมื่อวันที่ 1/24/17