ลงทะเบียน
ใกล้กัน ช่วยให้คุณแชร์เรื่องราวต่างๆ กับผู้คนมากมาย

CSS Viewport and Responsive ปรับเว็บให้แสดงได้หลายขนาดจอ

CSS Viewport and Responsive ปรับเว็บให้แสดงได้หลายขนาดจอ

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

Captcha Challenge
ลองรูปภาพใหม่
Type in the verification code above

ลองอ่านดูน่าสนใจ: