Responsive
คือ การทำเว็บไซต์ของเราให้สามารถแสดงผลได้สวยงาม ทั้งในคอมพิวเตอร์ แท็บเล็ต มือถือ ฯลฯ
Mobile First
คือ การออกแบบและเขียนโค้ดที่เริ่มต้นจากหน้าจอมือถือแล้วค่อยๆไล่หน้าจอที่ใหญ่่ขึ้นไป ซึ่งทำให้การเรียกใช้งานโค้ดในมือถือน้อยลงจึงทำให้การเปิดเว็บไซต์ของเราในหน้าจอมือถือเร็วขึ้นนั้นเอง
เริ่มต้นการเขียนโค้ด
ไฟล์ header.php
<meta name="viewport" content="width=device-width,initial-scale=1" />
เริ่มต้นด้วยการทำให้ธีมเรารู้จัก responsive ด้วยการนำโค้ดด้านบนไปใส่ไว้ที่ส่วน head ในไฟล์ header.php ก่อน
ไฟล์ style.css
/*** A ***/
@media (min-width:784px) {
/*** B ***/
}
@media (min-width:992px){
/*** C ***/
}
- ส่วน A คือ ตำแหน่งที่ใส่ css ที่ความกว้างเริ่มจาก 0px – 783px
- ส่วน B คือ ตำแหน่งที่ใส่ css ที่ความกว้างเริ่มจาก 784px – 991px
- ส่วน C คือ ตำแหน่งที่ใส่ css ที่ความกว้างเริ่มจาก 992px ขึ้นไป
- **ขนาดความกว้างสามารถเปลี่ยนได้ตามความต้องการ**
- **ถ้าส่วน A เขียน width:100px; แล้วส่วน B หรือ C ไม่ได้กำหนดไว้ ก็จะนำค่า width:100px; ของส่่วน A มาใช้งาน**
ตัวอย่างโค้ดและการแสดงผล
ปล. ลองเข้าไปดูใน CodePen แล้วลองยึดหดขนาดหน้าจอหน้าจอคอมดูครับ
Narongchai Suphiratwanich (K)
นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ SeedWebs & SeedThemes และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย