27 คะแนน โดย xguru 2023-02-10 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • แนะนำ Responsive Design
    • ใช้ CSS สมัยใหม่
    • ใช้ media query
  • การออกแบบแบบ Responsive ตลอดหลายปีที่ผ่านมา
    • Bootstrap, media query, Fixed-Width
  • Responsive Design กับเว็บไซต์ที่น่าเบื่อ
  • เว็บนั้นเป็น Responsive โดยพื้นฐานอยู่แล้ว
  • Responsive Design หลังปี 2023
    • ตอบสนองต่อความยาวของเนื้อหา
    • ตอบสนองต่อ viewport
    • ตอบสนองต่อ container
    • ตอบสนองต่อการตั้งค่าของผู้ใช้
  • หัวใจสำคัญของการสร้างเว็บไซต์แบบ Responsive คือการทำให้เว็บไซต์มีความยืดหยุ่น (fluid)
  • วิธีสมัยใหม่ในการสร้างเลย์เอาต์แบบ Responsive
    • CSS Flexbox
    • CSS Grid Layout
    • Fluid Sizing
    • Size Container Queries
    • Style Container Queries
    • User preference Media Queries
    • Logical Properties
    • Defensive CSS
  • บทสรุป

1 ความคิดเห็น

 
alstjr7375 2023-02-10

กรณีของ Fluid Sizing ผมเคยลองทำโดยอิงจาก visual angle เมื่อหลายปีก่อน
https://github.com/black7375/fluid-size/…