สั่งซื้อเทมเพลต
คลิปวิดีโอนี้เป็นคู่มือสอน "การจัดการรูปแบบ CSS Mobile" (การปรับแต่ง CSS เฉพาะการแสดงผลบนมือถือ) สำหรับเว็บไซต์ที่ใช้ Template จาก Hitztheme ครับ ซึ่งช่วยให้คุณปรับแต่งหน้าตาเว็บให้เหมาะสมกับหน้าจอขนาดต่างๆ ได้อย่างอิสระมากขึ้นครับ [00:12]
สรุปเนื้อหาและขั้นตอนการปรับแต่งมีดังนี้:
1. เครื่องมือที่ใช้ในการตรวจสอบ (Inspect) [00:50]
- ใช้ Google Chrome และกด F12 เพื่อเปิดเครื่องมือ Inspect [01:04]
- คลิกที่ไอคอน Device Toolbar เพื่อจำลองการแสดงผลบนอุปกรณ์ต่างๆ เช่น iPad, iPhone หรือมือถือรุ่นอื่นๆ [01:13]
- คุณสามารถสลับมุมมองระหว่างแนวตั้งและแนวนอนได้เพื่อดูความแตกต่าง [01:58]
2. การเข้าถึงเมนูตั้งค่า [02:12]
- ไปที่หลังบ้านของเว็บไซต์ เลือกเมนู Extensions > Templates > Styles
- คลิกเลือก Template ที่ใช้งาน และไปที่แถบ "CSS Mobile กำหนดเอง" [02:35]
3. การปรับแต่งที่น่าสนใจ [03:01]
- สีพื้นหลังเมนู Mobile: สามารถเปลี่ยนสีแถบเมนูที่แสดงเฉพาะบนมือถือให้เด่นชัดขึ้นได้ [03:06]
- การแยกขนาดหน้าจอ (Breakpoints): ระบบมีช่องสำหรับใส่ CSS แยกตามขนาดหน้าจอมาตรฐาน 3 ระดับ: [03:33]
- 1024px: สำหรับหน้าจอขนาด iPad แนวนอน
- 768px: สำหรับหน้าจอขนาด iPad แนวตั้ง
- 480px: สำหรับหน้าจอมือถือขนาดเล็กทั่วไป
- ตัวอย่างการปรับ: หากต้องการขยายฟอนต์เฉพาะบนมือถือที่มีขนาดเล็กกว่า 480px ให้ใส่ Code CSS ในช่องที่กำหนด เช่น ปรับฟอนต์ H3 ในส่วน Content 1 ให้ใหญ่ขึ้นเป็น 3em เฉพาะหน้าจอเล็ก [06:46]
4. การปรับแต่งขั้นสูง (Custom Media Query) [07:35]
- หากต้องการเจาะจงขนาดหน้าจอที่นอกเหนือจาก 3 ระดับข้างต้น สามารถใช้ Code @media screen and (max-width: ...px) เพื่อกำหนดสไตล์เฉพาะขนาดหน้าจอที่ต้องการได้เองครับ [08:14]
ข้อดีของการตั้งค่านี้: ช่วยให้คุณปรับแต่งการแสดงผลได้โดยไม่กระทบต่อเวอร์ชัน Desktop หรืออุปกรณ์ที่มีขนาดหน้าจอต่างกัน ทำให้ผู้ใช้งานได้รับประสบการณ์ที่ดีที่สุดในทุกอุปกรณ์ครับ [07:12]
