การเขียนเว็บไซต์ Responsive พื้นฐาน ตามวิธีการ Mobile First

css-responsive-mobile-first

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 แล้วลองยึดหดขนาดหน้าจอหน้าจอคอมดูครับ

โดย: [K] Narongchai Suphiratwanich

นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ Mennstudio และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย

สอบถาม & พูดคุย