การเช็คขนาดหน้าจอสำหรับทำ Responsive Website (หรือการใช้งาน Css Media Query ในภาษาที่นักพัฒนาเว็บไซต์เรียกกัน)

อันนี้ผมอิงจากของ Bootstrap ตัวล่าสุดนะครับ เลือกเอาแล้วแต่ถนัดว่าจะเอาจากเล็กไปใหญ่ หรือใหญ่ลงมาเล็กตามความถนัดได้เลย ความต่างของการเขียนจากเล็กไปใหญ่คือ mobile first กับ large screen size first ครับ อันแรกคือจอเล็กมาก่อน อย่างหลังคือจอใหญ่มาก่อน ก็คือแบบแรกเช็คจาก Min-width แบบหลังเช็คจาก Max-width หรือจะเช็คเป็นช่วงๆก็ได้ เช็คจาก min-with นี้ ถึง max-width นี้ อะไรประมาณนี้ Mobile First(จอเล็กก่อน หรือมือถือนั่นเอง) แบบแรกสำหรับเขียนใน Sass css ส่วนอันนี้สำหรับเขียนด้วย Css ธรรมดา ต่อไปเป็นการเอาจอใหญ่ก่อน แล้วตามด้วยจอเล็ก(Large screen first) แบบแรกสำหรับเขียนใน Sass css ส่วนอันนี้สำหรับเขียนด้วย Css ธรรมดา โน้ตนิดนึง ก่อนจะเขียนด้วย Sass css เราต้องประกาศตัวแปรสำหรับแต่ละขนาดหน้าจอก่อนนะครับ ด้านล่างนี้เลย อีกแบบนึงก็คือเป็นช่วงสำหรับแต่ละขนาดหน้าจอ ตัวอย่างเช่นเริ่มจากเล็กสุด… Continue reading การเช็คขนาดหน้าจอสำหรับทำ Responsive Website (หรือการใช้งาน Css Media Query ในภาษาที่นักพัฒนาเว็บไซต์เรียกกัน)