Frontend Academy · บทเรียน

มีเดียคิวรีและการพัฒนาแบบมือถือเป็นอันดับแรก

เขียนจุดเปลี่ยนด้วยมีเดียคิวรี min-width สร้างการจัดวางสำหรับมือถือก่อน และเพิ่มความสามารถทีละขั้นสำหรับหน้าจอที่ใหญ่ขึ้น

มีเดียคิวรีและการพัฒนาแบบมือถือเป็นอันดับแรก เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

มีเดียคิวรีคืออะไร

มีเดียคิวรีจะใช้กฎ CSS เฉพาะเมื่อเงื่อนไขบางอย่างเป็นจริง เช่น ความกว้างพื้นที่แสดงผลมากกว่าค่าที่กำหนด มีเดียคิวรีเป็นพื้นฐานของการออกแบบที่ตอบสนอง ทำให้สไตล์ชีตชุดเดียวปรับให้เข้ากับหน้าจอทุกขนาดได้

ไวยากรณ์พื้นฐาน

มีเดียคิวรีจะครอบบล็อก CSS ไว้ในกฎ @media กฎภายในจะมีผลเฉพาะเมื่อเงื่อนไขตรงตามที่กำหนด

@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

min-width กับ max-width

min-width: ใช้สไตล์เมื่อพื้นที่แสดงผลมีความกว้าง อย่างน้อย เท่านี้ (แนวทางอุปกรณ์เคลื่อนที่เป็นหลัก) max-width: ใช้สไตล์เมื่อพื้นที่แสดงผลมีความกว้าง ไม่เกิน เท่านี้ (แนวทางเดสก์ท็อปเป็นหลัก) ควรเลือก min-width สำหรับการพัฒนาแบบอุปกรณ์เคลื่อนที่เป็นหลัก

/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }

/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }

แนวทางอุปกรณ์เคลื่อนที่เป็นหลัก

เขียน CSS สำหรับหน้าจอขนาดเล็กก่อน (อยู่นอกมีเดียคิวรีทั้งหมด) จากนั้นใช้มีเดียคิวรี min-width เพื่อเพิ่มความซับซ้อนทีละขั้นสำหรับหน้าจอขนาดใหญ่ขึ้น วิธีนี้ทำให้ CSS สำหรับผู้ใช้อุปกรณ์เคลื่อนที่มีขนาดเล็กลง และทำให้โค้ดโดยรวมสะอาดขึ้น

.card {
  /* Mobile defaults: single column */
  padding: 16px;
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .card {
    /* Tablet enhancement */
    padding: 24px;
    font-size: 1rem;
  }
}

จุดแบ่งที่ใช้กันทั่วไป

เลือกจุดแบ่งตามเนื้อหาของคุณ ไม่ใช่ตามอุปกรณ์เฉพาะรุ่น จุดเริ่มต้นที่นิยมใช้ ได้แก่ 480px (โทรศัพท์ขนาดใหญ่), 768px (แท็บเล็ต), 1024px (เดสก์ท็อปขนาดเล็ก) และ 1280px (เดสก์ท็อปขนาดใหญ่) หลีกเลี่ยงจุดแบ่งที่เจาะจงกับอุปกรณ์รุ่นใดรุ่นหนึ่ง

ประเภทสื่อ

นอกเหนือจากความกว้างหน้าจอแล้ว คุณยังกำหนดเป้าหมายตามประเภทสื่อได้ ได้แก่ screen สำหรับการแสดงผล และ print สำหรับเครื่องพิมพ์ คิวรีสื่อสำหรับการพิมพ์ช่วยให้คุณปรับแต่งลักษณะของหน้าเว็บเมื่อพิมพ์ได้ เช่น ซ่อนแถบนำทางและปรับสี

@media print {
  nav, footer, .ads {
    display: none;
  }
  body {
    font-size: 12pt;
    color: black;
  }
}

การรวมเงื่อนไขด้วย and

เชื่อมเงื่อนไขด้วย and เพื่อใช้สไตล์เฉพาะเมื่อเงื่อนไขทั้งสองเป็นจริง ใช้ not และ or สำหรับตรรกะที่ซับซ้อนยิ่งขึ้น

@media (min-width: 768px) and (max-width: 1023px) {
  /* tablets only */
}

@media (orientation: landscape) and (max-width: 767px) {
  /* landscape phones */
}

prefers-color-scheme

ตอบสนองต่อการตั้งค่าโหมดมืดของ OS ของผู้ใช้ โดยจัดเตรียมธีมมืดไว้เป็นค่าเริ่มต้นโดยไม่ต้องมีปุ่มสลับ

@media (prefers-color-scheme: dark) {
  body {
    background: #1a202c;
    color: #f7fafc;
  }
}

prefers-reduced-motion

เคารพผู้ใช้ที่ต้องการให้มีการเคลื่อนไหวน้อยลง เช่น ผู้ที่มีความผิดปกติของระบบทรงตัวหรือโรคลมชัก โดยปิดหรือทำภาพเคลื่อนไหวให้เรียบง่ายลงภายในคิวรีสื่อนี้

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

คิวรีคอนเทนเนอร์ — อนาคต

คิวรีคอนเทนเนอร์ (@container) ใช้สไตล์ตามขนาดของคอนเทนเนอร์แม่ แทนที่จะอิงตามพื้นที่แสดงผล คิวรีเหล่านี้ทำให้การตอบสนองในระดับคอมโพเนนต์เกิดขึ้นได้อย่างแท้จริง และพร้อมใช้งานในเบราว์เซอร์สมัยใหม่ทั้งหมดตั้งแต่ปี 2023

.card-container {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

คุณสมบัติเชิงตรรกะสำหรับการรองรับ RTL

ใช้คุณสมบัติเชิงตรรกะ เช่น margin-inline-start แทน margin-left สำหรับเค้าโครงที่ทำงานได้ทั้งในภาษาที่เขียนจากซ้ายไปขวาและจากขวาไปซ้าย วางรากฐานให้เค้าโครงที่ตอบสนองของคุณรองรับอนาคต

ตรวจสอบความเข้าใจ

แนวทางใดกำหนดกลยุทธ์ CSS แบบ เริ่มจากมือถือ ได้อย่างถูกต้อง

ทบทวน: คิวรีสื่อและการเริ่มจากมือถือ

@media (min-width: N) ใช้สำหรับการเพิ่มความสามารถแบบก้าวหน้าที่เริ่มจากมือถือ เขียนสไตล์พื้นฐานสำหรับมือถือโดยไม่ใช้คิวรี แล้วเพิ่มความซับซ้อนสำหรับหน้าจอขนาดใหญ่ ใช้ prefers-color-scheme สำหรับโหมดมืด ใช้ prefers-reduced-motion เพื่อการเข้าถึง และใช้คิวรีคอนเทนเนอร์สำหรับการตอบสนองในระดับคอมโพเนนต์

คำถามที่พบบ่อย

บทเรียน “มีเดียคิวรีและการพัฒนาแบบมือถือเป็นอันดับแรก” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “มีเดียคิวรีและการพัฒนาแบบมือถือเป็นอันดับแรก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “มีเดียคิวรีและการพัฒนาแบบมือถือเป็นอันดับแรก”

เขียนจุดเปลี่ยนด้วยมีเดียคิวรี min-width สร้างการจัดวางสำหรับมือถือก่อน และเพิ่มความสามารถทีละขั้นสำหรับหน้าจอที่ใหญ่ขึ้น คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “มีเดียคิวรีและการพัฒนาแบบมือถือเป็นอันดับแรก” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

เมตาแท็ก viewport
Flexbox สำหรับการจัดวาง
CSS Grid สำหรับการจัดวาง
มีเดียคิวรีและการพัฒนาแบบมือถือเป็นอันดับแรก

← กลับไปที่ Frontend Academy