หลังจากที่ผมได้พูดถึง วิธีเรียกใช้ 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 แล้วพบกันใหม่คราวหน้าครับ