Responsive design: media queries, หน่วยสัมพัทธ์

ปรับอินเทอร์เฟซของคุณให้เข้ากับทุกขนาดหน้าจอด้วยแนวทาง mobile-first, media queries และหน่วย rem, % และ vw

9 นาที · 3 คำถาม

แนวทางแบบมืออาชีพคือ mobile-first คุณเขียนสไตล์สำหรับหน้าจอเล็กก่อน จากนั้นค่อยปรับปรุงเลย์เอาต์เมื่อมีพื้นที่มากขึ้นโดยใช้ media queries แบบ min-width CSS พื้นฐานยังคงเรียบง่าย และแต่ละ breakpoint จะเพิ่มเฉพาะสิ่งที่เปลี่ยนแปลงจริงเท่านั้น

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

ส่วนเรื่องหน่วย ให้เลิกใช้พิกเซลกับตัวอักษร 1rem เท่ากับขนาดตัวอักษรของอีลิเมนต์ราก(16px ตามค่าเริ่มต้น) และเหนือสิ่งอื่นใดคือ เคารพการตั้งค่าขนาดข้อความ ที่ผู้ใช้เลือกไว้ในเบราว์เซอร์ ผู้ใช้ที่มีความบกพร่องทางการมองเห็นซึ่งตั้งฟอนต์ไว้ที่ 20px จะเห็นเว็บทั้งเว็บของคุณขยายขนาดตามสัดส่วน ตราบใดที่คุณใช้ rem

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

.section {
  padding: 4rem 1.5rem;
}

สำหรับความกว้าง ให้ผสมผสานหน่วยสัมพัทธ์ % เพื่อกินพื้นที่ส่วนหนึ่งของพ่อแม่ max-width เพื่อจำกัดขนาดบนหน้าจอใหญ่ vw สำหรับขนาดที่ผูกกับความกว้างของ viewport (1vw เท่ากับ 1% ของมัน) ฟังก์ชัน clamp(min, ideal, max) สร้างค่าที่ลื่นไหลซึ่งปรับตัวได้โดยไม่ต้องใช้ media query เลย เหมาะสำหรับหัวเรื่องขนาดใหญ่

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. ในแนวทาง mobile-first คุณใช้ media query ใดเพื่อเล็งไปที่หน้าจอขนาดใหญ่
   • @media (max-width: 768px)
   • @media (min-width: 768px)
   • @media (device: desktop)
2. ตามค่าเริ่มต้น 1rem เท่ากับอะไร
   • 10 พิกเซล ซึ่งเป็นค่าคงที่ในมาตรฐาน CSS
   • ขนาดตัวอักษรของอีลิเมนต์พ่อแม่
   • ขนาดตัวอักษรของอีลิเมนต์ราก คือ 16px ตามค่าเริ่มต้น
3. 50vw เท่ากับอะไร
   • 50% ของความกว้าง viewport
   • 50% ของความกว้างของอีลิเมนต์พ่อแม่
   • 50 พิกเซล ไม่ว่าหน้าต่างจะเป็นอย่างไร