เหมาะสำหรับคนเขียนเว็บ จัดให้เว็บปรับสัดส่วนตามขนาดจอ ตัวอย่างการใช้เช่นให้รูปภาพแสดงขนาดต่างกันบนมือถือ 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%;
}
}