ปรับขนาดฟอนต์ให้เล็กลงบนอุปกรณ์มือถือ
CSS
no articles
no articles
no articles
no articles
no articles
คำอธิบายเพิ่มเติม:
- เราได้เพิ่ม Media Queries อีก 2 ชุด คือ @media only screen and (max-width: 700px) และ @media only screen and (max-width: 500px)
- ภายในแต่ละ Media Query เราได้กำหนดขนาดฟอนต์ใหม่สำหรับคลาส .desc โดยลดขนาดลงจาก 17px เป็น 15px สำหรับหน้าจอขนาดไม่เกิน 700px และเป็น 14px
- สำหรับหน้าจอขนาดไม่เกิน 500px คุณสามารถปรับขนาดเหล่านี้ได้ตามความเหมาะสมค่ะ สำหรับ Media Query ที่มีขนาดหน้าจอไม่เกิน 500px เรายังได้ปรับความกว้างของคลาส .responsive เป็น width: 100%; เพื่อให้รูปภาพแสดงเต็มความกว้างของหน้าจอมือถือ
เมื่อคุณเปิดหน้าเว็บนี้บนอุปกรณ์ที่มีขนาดหน้าจอแตกต่างกัน ขนาดฟอนต์ในส่วน .desc ก็จะปรับเปลี่ยนไปตามขนาดหน้าจอโดยอัตโนมัติ
