จากรูปคุณจะเห็นว่า ขนาดหน้าจอของ Smartphon มีขนาดเล็กสุด Tablet ขนาดกลาง
และ Desktop แสดงผลเต็มจอ จากบทความ ตัวอย่าง รูปแบบการวาง Layout สำหรับ Mobile Phone
คุณจะทราบว่า ขนาดหน้าจอของ Mobile Phone จะอยู่ที่ “320px,” “480px,” “768px,” ครับแท็ก CSS3 โค้ดที่คุณจะใช้ก็คือ
@media screen and (max-width: "ขนาดหน้าจอ" px) {
.
.
}
มาเริ่มกันเลยครับ
โค้ด CSS3 สำหรับหน้าจอขนาดไม่เกิน 320 px
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
@media screen and (max-width: 320px) {
body{
background-color:#CC6;
}
#tast:after {
content: "เว็บมีขนาด ไม่เกิน 320px;";
color:red;
}
}
</style>
</head>
<body>
<div id="tast"></div>
</body>
</html>
0 comments:
Post a Comment