รู้จักกับ Media Features ของ CSS3 Media Queries

หลังจากที่ผมได้พูดถึง วิธีเรียกใช้ Media Queries ไปในบทความที่แล้ว คราวนี้ผมจะมาพูดถึง Media Features ซึ่งเป็นส่วนหนึ่งของ Expression ใน Media Queries ครับ

รู้จักกับ Expression และ Media Features

ก่อนอื่นขอทวนก่อนว่า media queries นั้นเกิดจาก media types + expression(s) ซึ่ง expression นั้นจะเป็นส่วนที่ใช้ตรวจสอบคุณสมบัติของอุปกรณ์ (Media Features) ว่ามีค่าตรงกับที่เราระบุไว้หรือไม่ หากอุปกรณ์ใดมี media type ตรงกับที่เราระบุไว้ และค่าของ expression เป็น true อุปกรณ์นั้นจะนำ style sheets ที่เรากำหนดไว้มาใช้ ซึ่งสามารถสรุปสั้นๆ ได้ดังนี้

  • media queries = media types + expression(s)
  • expression = media features : value
  • media type is TRUE + expression is TRUE => apply style sheets

Media Features มีอะไรบ้าง?

ในเวลาที่ผมเขียนบทความนี้ Media features มีทั้งหมด 13 features ด้วยกัน แต่ผมขอยกมาเฉพาะ Media features ที่ใช้บ่อยๆ ดังนี้ครับ

FeatureValueDescription
widthlengthความกว้างของ viewport, ไม่สนความกว้างของ “ส่วนแสดงผล” ของอุปกรณ์
heightlengthความสูงของ viewport, ไม่สนความสูงของ “ส่วนแสดงผล” ของอุปกรณ์
device-widthlengthความกว้างของ “ส่วนแสดงผล” ของอุปกรณ์, ไม่สนความกว้างของ viewport
device-heightlengthความสูงของ “ส่วนแสดงผล” ของอุปกรณ์, ไม่สนความสูงของ viewport
orientationportrait, landscapeแนวการแสดงผลของอุปกรณ์ เช่น แนวตั้ง หรือ แนวนอน เป็นต้น
aspect-ratioratioอัตาราส่วนระหว่าง width กับ height
device-aspect-ratioratioอัตาราส่วนระหว่าง device-width กับ device-height

*** สามารถอ่านรายละเอียดเพิ่มเติมเกี่ยวกับ viewport, device-width และ orientation ได้ที่ width VS device-width ใน Responsive Web Design

Media Features ส่วนใหญ่ จะรองรับ prefix “min-” และ “max-” ยกเว้น orientation ตัวอย่างเช่น “min-width: 1024px” จะหมายถึงอุปกรณ์ที่มี width มากกว่าหรือเท่ากับ 1024px ส่วน “max-width: 320px” จะหมายถึงอุปกรณ์ที่มี width น้อยกว่าหรือเท่ากับ 320px

ลงมือนำ Media Features ไปใช้จริง!

หลังจากที่เราได้รู้จัก Media Features ต่างๆ ที่นิยมใช้กันไปแล้ว คราวนี้เราลองมาดูตัวอย่างการใช้งานกันเลยครับ

หลังจากที่ได้ดูตัวอย่างการใช้ Media Features ในการเขียน Expression สำหรับ Media Queries ไปแล้ว จะเห็นว่าไม่ยากเลยใช่มั้ยครับ คราวหน้าผมจะพูดถึงเรื่องที่หลายๆ คน กำลังให้ความสนใจ นั่นก็คือ ตัวอย่างการใช้ Media Queries สำหรับ Responsive Web Design แล้วพบกันใหม่คราวหน้าครับ

(Visited 10,271 times, 10 visits today)

Leave a Reply