การจะทำเว็บไซต์ให้เป็นแบบ Responsive นั้นต้องใช้องค์ความรู้หลายอย่างเช่น CSS,Bootstrap , Javascript ,html ประกอบกัน เพื่อให้เว็บไซต์นั้นแสดงผลในหน้าจอของอุปกรณ์ที่ขนาดต่างกันได้อย่างเหมาะสมโดยเรื่องที่ต้องศึกษามีดังนี้
Grid System
จะแบ่งหน้าจอแสดงผลออกเป็น 12 ส่วน
โดยเขียนโค๊ดโดยใช้ bootstrap ดังนี้
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
</div>
col หมายถึง column
xs หมายถึง Break point ช่วงขนาดหน้าจอที่แสดงผล (เล็กสุด)
12 หมายถึง 12 ช่อง
ดังนั้น col-xs-12 จึงหมายความว่า เมื่อมีการปรับขนาดหน้าจอมาในช่วง Break point เล็กสุดให้ ความยาวของพื้นที่เต็มความกว้าง 12 ช่อง
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
</div>
</div>
ผลลัพธ์ที่ได้
ช่วง xs => จะเรียง div ไล่ลงมา 1x4
ช่วง sm =>จะเรียง div 2 x 2
ช่วง md =>จะเรียง div 3 x 1 เศษ 1
ช่วง lg =>จะเรียง div 4 x 1
Media Query เป็นการกำหนด Break point ว่าถ้าขนาดหน้าจอ ช่วงนี้ ให้ css ของ class ที่ระบุเปลี่ยนแปลงเป็นอย่างไร
@media(max-width:500px){ //ในช่วงที่น้อยกว่า 500px ให้แสดงผล
.content-text{
font-size:14px;
color:orange;
}
}
@media(min-width:500px)and(max-width:768px){ //ในช่วงที่มากกว่า 500 แต่น้อยกว่า 768px ให้แสดงผล
.content-text{
font-size:20px;
color: red;
}
}
@media(min-width:768px){ //ในช่วงที่มากกว่า768 ให้แสดงผล
.content-text{
font-size:30px;
color: blue;
}
}
Flex CSS เป็นรูปแบบการแสดงผลหนึ่งในการจัด Layout ของ html component ต่างๆ
เช่น
<style>
.container{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
</style>
<div class="container" >
<div style="background-color:red">
</div>
<div style="background-color:green">
</div>
</div>
display:flex หมายถึง ให้แสดงผลแบบ flex
flex-direction :row; หมายถึง ให้ component ใน container เรียงตัวตามแนวนอน
flex-direction : column; หมายถึง ให้ component ใน container เรียงตัวตามแนวตั้ง
หาก flex-direction เป็น แบบ row
align-items:center; การวางตัวตามแกนขวาง(แนวตั้ง) ให้ อยู่ตรงกลาง
justify-content:center; การวางตัวตามแกนหลัก(แนวนอน) ให้ อยู่ตรงกลาง
หาก flex-direction เป็น แบบ column
align-items:flex-start; การวางตัวตามแกนขวาง(แนวนอน) ให้ ชิดหน้า
justify-content:flex-end; การวางตัวตามแกนหลัก(แนวตั้ง) ให้ ชิดหลัง
แกนหลังของ row คือแนวนอน แกนขวางคือแนวตั้ง
แกนหลักของ column คือแนวตั้ง แกนขวางคือแนวนอน