Tagged in

Responsive Web Design

SiamHTML
SiamHTML
The collection of articles for front-end developers
More information
Followers
96
Elsewhere
More, on Medium

วิธีกำหนด font-size ใน Responsive Web Design

จากบทความ “Em vs. Px vs. Percent : Font-Size เลือกใช้แบบไหนถึงจะดี?” ทำให้เรารู้แล้วว่าควรกำหนด font-size โดยใช้หน่วยแบบ relative (%, em, rem) ไม่ใช่หน่วยแบบ absolute (px, pt) แต่ถึงกระนั้น การกำหนด font-size ในการทำเว็บก็ยังคงเป็นปัญหาสำหรับหลายๆ คน…


สอนวิธีทำ Responsive Table

จากบทความ “ใช้ html5 table อย่างไรให้เหมาะสม ?” ทำให้เรารู้แล้วว่าการใช้ table นั้นยังสามารถทำได้อยู่ถ้าข้อมูลนั้นเป็น tabular data ปัญหาต่อมาก็คือ เราจะทำอย่างไร เพื่อให้ table ยังคงสามารถแสดงผลได้ดีเมื่อดูด้วยหน้าจอขนาดเล็กๆ

โจทย์ของ Responsive Table


@viewport CSS Rule คืออะไร ? + สอนวิธีใช้

โดยปกติแล้ว เวลาเราต้องการจะปรับค่าต่างๆ ที่เกี่ยวกับ viewport เราก็มักจะใช้ viewport meta tag ที่คิดค้นขึ้นมาโดย Apple แต่ W3C มองว่าการปรับแต่ง viewport ควรทำให้เป็นมาตรฐานมากกว่านี้ จึงได้สร้าง “CSS Device Adaptation” ขึ้นมา


วิธีเรียกใช้ CSS3 Media Queries

หลังจากที่ผมได้พูดถึง Media Queries ไปแล้ว ในบทความ media queries คืออะไร คราวนี้เราลองมาดูวิธีการเรียกใช้งาน Media Queries ซึ่งมีด้วยกัน 3 วิธี ได้แก่ วิธีเรียกด้วย HTML เรียกด้วย CSS ผ่าน @import rule และ วิธีเรียกด้วย CSS ผ่าน @media rule…