เหมาะสำหรับคนเขียนเว็บ จัดให้เว็บปรับสัดส่วนตามขนาดจอ ตัวอย่างการใช้เช่นให้รูปภาพแสดงขนาดต่างกันบนมือถือ iPad และ Desktop
ก็อปใส่ในส่วน header:
<meta name="viewport" content="width=device-width, initial-scale=1">
ก็อปใส่ในส่วน header > style:
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
#image {
width:100%;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
#image {
width:90%;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
#image {
width:80%;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
#image {
width:70%;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
#image {
width:60%;
}
}
