CSS มีเดียควิรี

CSS2 ได้นำเสนอประเภทสื่อ

CSS2 ได้นำเสนอ @media กฎระเบียบนี้ทำให้มีความเป็นไปได้ที่จะกำหนดกฎระเบียบสไตล์ต่างๆสำหรับประเภทสื่อต่างๆ

เช่น: คุณอาจมีกลุ่มกฎระเบียบสไตล์สำหรับหน้าจอคอมพิวเตอร์ กลุ่มกฎระเบียบสำหรับเครื่องพิมพ์ กลุ่มกฎระเบียบสำหรับอุปกรณ์หลังมือ และแม้แต่กลุ่มกฎระเบียบสำหรับโทรทัศน์ และอื่นๆ

นอกจากประเภทสื่อพิมพ์แล้ว ประเภทสื่อนี้ยังไม่ได้รับการสนับสนุนโดยเครื่องอุปกรณ์ในวงกว้าง

CSS3 ได้นำเข้ามีเดียความความยาว

มีเดียความความยาวใน CSS3 มีการขยายความหมายของประเภทสื่อใน CSS2 พวกมันไม่ได้หาประเภทอุปกรณ์ แต่มีความสนใจที่เกี่ยวกับความสามารถของอุปกรณ์

มีเดียความความยาวสามารถตรวจสอบหลายอย่าง เช่น:

  • ความกว้างและความสูงของวินดో
  • ความกว้างและความสูงของอุปกรณ์
  • ทิศทาง (หลังจากที่แท้งคอมพิวเตอร์หรือมือถืออยู่ในโหมดตั้งตรงหรือโหมดตั้งตั้งใน)
  • การแบ่งชิด

การใช้มีเดียความความยาวเป็นเทคโนโลยีที่แพร่หลาย ที่สามารถให้สไตล์เซ็ตที่ที่สร้างสรรค์สำหรับเครื่องคอมพิวเตอร์เดสก์ทอป โลดเต็ป ตั้งโต๊ะ และมือถือ (เช่น iPhone และเครื่องมือถือที่ใช้ระบบแอนดรอยด์) ได้

การสนับสนุนเบราเซอร์

ตัวเลขในตารางหมายถึงการสนับสนุนที่สมบูรณ์ @media เวอร์ชันเบราเซอร์ที่เป็นเจ้าของกฎที่มีอันดับต้น

ทางแยก
@media 21.0 9.0 3.5 4.0 9.0

มีเดียความความยาวเกี่ยวกับระบุ

มีเดียความความยาวประกอบด้วยประเภทสื่อหนึ่ง และสามารถมีความเปรียบเทียบหนึ่งหรือหลายเพื่อที่จะแปลงเป็น true หรือ false

@media not|only mediatype and (expressions) {
  CSS-Code;
}

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

เว้นแต่คุณใช้ประเมินผล not หรือ only ประเภทสื่อเป็นทางเลือกและโดยท้องตาม all ประเภท

คุณยังสามารถใช้สไตล์เซ็ตที่แตกต่างกันสำหรับสื่อต่างๆ

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 ประเภทสื่อ

ค่า รายละเอียด
all สำหรับทุกสายงานอุปกรณ์
print สำหรับเครื่องพิมพ์
screen สำหรับหน้าจอคอมพิวเตอร์ ตั้งโต๊ะ มือถือ สมาร์ทโฟน และอื่นๆ
speech สำหรับผู้ใช้ที่ต้องการ“อ่าน”หน้าเว็บด้วยเสียง

ตัวอย่างที่เรียบง่ายของมีเดียความความยาว

หนึ่งวิธีในการใช้มีเดียความความยาวคือมีส่วน CSS ที่เป็นทางเลือกในสไตล์เซ็ต

ตัวอย่างนี้จะเปลี่ยนสีพื้นหลังเป็นสีเขียวอ่อนเมื่อความกว้างของวินดోมีความกว้าง 480 พิกเซลหรือมากกว่า (ถ้าความกว้างของวินดోต่ำกว่า 480 พิกเซล สีพื้นหลังจะเป็นสีชมพู):

ตัวอย่าง

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

ทดลองด้วยตัวเอง

ตัวอย่างนี้แสดงว่าหลังจากเปิดมาเมนูจะลอยไปที่ด้านซ้ายของหน้าเว็บเมื่อความกว้างของวินดోมีความกว้าง 480 พิกเซลหรือมากกว่า (ถ้าความกว้างของวินดోต่ำกว่า 480 พิกเซล มาเมนูจะอยู่ด้านบนของสาระ):

ตัวอย่าง

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

ทดลองด้วยตัวเอง

ตัวอย่างมีเดียควิรีเพิ่มเติม

หากต้องการตัวอย่างมีเดียควิรีเพิ่มเติม โปรดเข้าถึงหน้าต่อไปตัวอย่าง CSS MQ.

คู่มือ CSS @media

สรุปเกี่ยวกับทุกชนิดของมีเดียควิรี ลักษณะ/การแสดงที่เต็มตัว โปรดดูที่ CSS กฎ @media ในคู่มือ.