รู้จักกับ 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 ที่ใช้บ่อยๆ ดังนี้ครับ

Feature	Value	Description
width	length	ความกว้างของ viewport, ไม่สนความกว้างของ “ส่วนแสดงผล” ของอุปกรณ์
height	length	ความสูงของ viewport, ไม่สนความสูงของ “ส่วนแสดงผล” ของอุปกรณ์
device-width	length	ความกว้างของ “ส่วนแสดงผล” ของอุปกรณ์, ไม่สนความกว้างของ viewport
device-height	length	ความสูงของ “ส่วนแสดงผล” ของอุปกรณ์, ไม่สนความสูงของ viewport
orientation	portrait, landscape	แนวการแสดงผลของอุปกรณ์ เช่น แนวตั้ง หรือ แนวนอน เป็นต้น
aspect-ratio	ratio	อัตาราส่วนระหว่าง width กับ height
device-aspect-ratio	ratio	อัตาราส่วนระหว่าง 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 ต่างๆ ที่นิยมใช้กันไปแล้ว คราวนี้เราลองมาดูตัวอย่างการใช้งานกันเลยครับ

1 2 3 4

/* The syntax of a media query using @media rule */ @media [only|not]? media_type and expression [and expression]?{     /* some css here */ }

1 2 3 4

/* A simple example of a media query. */ @media only screen and (min-width: 320px){     /* some css here */ }

1 2 3 4

/* You can add more expressions using "and" */ @media not screen and (min-width: 640px) and (max-width: 1600px){     /* some css here */ }

1 2 3 4

/* You can add more media queries using "," */ @media screen and (min-width: 320px), print and (min-width: 320px){     /* some css here */ }

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

Source : http://www.siamhtml.com/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B9%83%E0%B8%8A%E0%B9%89-media-features-%E0%B9%83%E0%B8%99-media-queries/