1.สร้าง Layout ด้วย Div ก่อน 3 อัน
<div id=container>Hello World!
</div>
<div class=col-25 >Hello World!
</div>
<div class=col-75 >Hello World!
</div>
2.ใส่ css กำหนดค่า ให้ div ทั้ง 3 ตัว และ body ด้วย
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px;
font-size: 13px;
}
#container {
background: #fff;
padding: 20px;
text-align: center;
}
.col-25 {
background: #ff0;
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
background: #f0f;
float: left;
width: 75%;
margin-top: 6px;
}
div container คือเต็มจอ
col-25 คือ column ขนาด 25% ของจอ
col-75 คือ column ขนาด 75% ของจอ
จะได้หน้าเวบ แบบสัดส่วน 25:75 ใครอยากได้ 30:70 ก็เปลี่ยนเลขเอานะครับ
3.ใส่ event ให้ css ด้วยคำสั่ง @media screen ตามนี้
@media screen and (max-width: 600px) {
.col-25, .col-75 {
width: 100%;
margin-top: 0;
}
เมื่อหน้าจอถูกย่อให้น้อยกว่า 600px แล้ว div col-25 และ col-75 จะขยายร่างเป็น 100% เต็มจอมือถือ
เสร็จแล้วก็ไปหาโปรแกรม แปลง html เป็น apk ก็ได้ app android แว้ว
ง่ายมะ!!!!
ปล.อยากทำเป็นคลิปวิดิโอแต่ ไม่ค่อยมีเวลาอัดคลิป
