Knowledge Sharing : Web Design , SEO , IT Training

Find us on

facebook
Jul
10
2012

[CSS3] 01 – Media Queries ตอน Resolution,Screen

หลังจากที่ได้เกริ่นนำเรื่อง Media Queries ไปในบทความ เรื่อง ทำไมต้องใช้ HTML5,CSS3 ในบทความนี้เราจะมาพูดถึงมันกันเต็มๆ ว่ามันคืออะไร และวิธีการใช้งานอย่างไร รวมไปถึงบน iOs , Android ด้วย

 Media Queries พร้อมใช้งานแล้วกับ

ตาีรางแสดง เบราเซอร์ที่สนับสนุนการใช้งาน จาก caniuse.com

Internet Explorer 9+ , Chrome 4+ , Firefox3.6+ , Safari 4+ , Opera 9.5+ , iOs Safari 3.2+ , Opera Mobile 10+ , Android 2.1+

ทำไม Responsive Web Design ต้องใช้ Media Queries

เราสามารถเข้าถึงอุปกรณ์แบบเฉพาะเจาะจง ขนาดหน้าจอ ขนาดการแสดงผล ของอุปกรณ์ที่ใช้เข้าเว็บนั้นๆ ทำให้การเลือกแสดงผล แม่นยำและถูกต้องมากที่สุด เหมือนกับเลือกทางที่ดีที่สุดให้ผู้ชมคนนั้นๆ

 ลองมาทดสอบเล่นๆกันดู

คลิกเพื่อดู demo ลองขยับ ยืด หดเบราเซอร์ เพื่อทดสอบความแตกต่าง ในแต่ละขนาดหน้าจอ โดยใช้ความสามารถ Media Queries

ตัวอย่าง CSS Style ที่ใช้ Media Queries

body {
background-color:#FFF;
background:url(than960.jpg) no-repeat;
}
@media screen and (max-width: 960px) {
body {
background:url(max960.jpg) no-repeat;
}
}
@media screen and (max-width: 768px) {
body {
background:url(max768.jpg) no-repeat;
}
}
@media screen and (max-width: 550px) {
body {
background:url(max550.jpg) no-repeat;
}
}
@media screen and (max-width: 320px) {
body {
background:url(max320.jpg) no-repeat;
}
}

Resolution ของอุปกรณ์ต่างๆ

ย้อนกลับไป CSS2 การเรียกใช้ CSS  ถ้าเราต้องให้เรียกใช้เฉพาะ media ที่เป็น Screen เราจะเรียกใช้ดังนี้
<link rel=”stylesheet” type=”text/css” media=”screen” href=”screenstyles.css”>

แต่ใน CSS3 ทำได้มากกว่านั้น เราลองมาดูการเรียกใช้สำหรับ Screen กัน แต่เพิ่มแนวตั้ง แนวนอนเข้ามาได้ด้วย
<link rel=”stylesheet” media=”screen and (orientation: portrait)” href=”portrait-screen.css” />

 

 

เช่นเดียวกับ กฎของ CSS ในเรื่องความสามารถสร้างสไตล์ได้หลายๆทาง โดยอาศัย Media Queries ใส่เข้าไปเช่น

@media screen and (max-device-width: 400px) {
h1 { color: green }
}
@media screen and (min-device-width: 960px) {
h1 { color: red }
}

ผลที่ได้คือ พาดหัว H1 หากใช้ อุปกรณ์ที่หน้าจอกว้างมากสุด 400pixel  สีจะเป็นสีเขียว  แต่ถ้ากว้างอย่างน้อย 960px จะเป็นสีแดง และสำหรับ method import stylesheet เข้ามาใน stypesheet ของเราปัจจุบันที่เปิดอยู่ นั้นไม่แนะนำให้ใช้เพราะมันจะส่ง HTTP Requests ถ้าจำเป็นต้องใช้ ก็ใช้อย่างระวัง เพราะจะทำให้โหลดช้า เว็บช้า เช่น
@import url("phone.css") screen and (max-width:360px);

สำหรับ Media Type มีชนิดใดบ้าง สามารถเข้าไปดูรายละเอียดลึกๆได้ที่  http://www.w3.org/TR/CSS2/media.html#media-types

ในบทความต่อไป เราจะพูดถึงเรื่อง Media Queries ต่อว่ามันทดสอบความสามารถอะไร ของอุปกรณ์ได้บ้าง

About the Author:

Leave a comment

You may also interested