ไวยากรณ์และจุดแบ่งหน้าจอทั่วไป
เรียนรู้ไวยากรณ์ของมีเดียคิวรีและจุดแบ่งหน้าจอมาตรฐานที่ใช้ในการออกแบบเว็บไซต์สมัยใหม่
ไวยากรณ์และจุดแบ่งหน้าจอทั่วไป เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ไวยากรณ์ของมีเดียคิวรี
มีเดียคิวรีครอบกฎ CSS ไว้และนำกฎไปใช้เฉพาะเมื่อเงื่อนไขเป็นจริง ไวยากรณ์พื้นฐานคือ:
<div class="box">Media query syntax demo</div>
ประเภทของสื่อ
ประเภทสื่อที่ใช้บ่อย:
all— ใช้กับอุปกรณ์แสดงผลทั้งหมด (ค่าเริ่มต้น)screen— หน้าจอคอมพิวเตอร์และโทรศัพท์print— สำหรับการแสดงตัวอย่างก่อนพิมพ์และการพิมพ์speech— โปรแกรมอ่านหน้าจอ
<div class="layout">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
คุณลักษณะของสื่อ
คุณลักษณะของสื่ออธิบายลักษณะของอุปกรณ์หรือวิวพอร์ต คุณลักษณะที่ใช้บ่อย ได้แก่ width, height, orientation, resolution, prefers-color-scheme และ hover
มีเดียคิวรี min-width
คุณลักษณะที่ใช้บ่อยที่สุดนี้กำหนดเป้าหมายหน้าจอที่มีความกว้างตั้งแต่เกณฑ์ขึ้นไป เป็นแนวทางที่เริ่มออกแบบจากมือถือเป็นหลัก
<div class="box">Breakpoint ladder</div>
จุดแบ่งที่ใช้บ่อย
ไม่มีจุดแบ่งใดที่ถูกต้องสำหรับทุกกรณี ชุดค่าที่ได้รับความนิยมชุดหนึ่งอิงจากความกว้างของอุปกรณ์ที่พบได้ทั่วไป:
- 480px — โทรศัพท์ขนาดใหญ่
- 768px — แท็บเล็ต
- 1024px — เดสก์ท็อปขนาดเล็ก แท็บเล็ตแนวนอน
- 1280px — เดสก์ท็อปมาตรฐาน
- 1536px — เดสก์ท็อปขนาดใหญ่
จุดแบ่งตามเนื้อหา
แทนที่จะกำหนดจุดแบ่งตามอุปกรณ์ แนวทางสมัยใหม่จะกำหนดจุดแบ่งเมื่อ เนื้อหา เริ่มจัดวางไม่ลงตัว ให้ออกแบบที่ขนาดหนึ่ง จากนั้นปรับขนาดและเพิ่มจุดแบ่งเมื่อเลย์เอาต์เริ่มดูไม่ดี
ไวยากรณ์ช่วงแบบสมัยใหม่
CSS สมัยใหม่รองรับไวยากรณ์ช่วงภายในมีเดียคิวรี ซึ่งอ่านง่ายกว่าการรวม min และ max:
<div class="panel">Range syntax demo</div>
การใช้ and ร่วมกัน
ใช้ and เพื่อกำหนดให้หลายเงื่อนไขเป็นจริงพร้อมกัน:
<div class="sidebar">Sidebar</div>
การปฏิเสธด้วย not
ใช้ not เพื่อปฏิเสธมีเดียคิวรี ซึ่งจะมีผลกับทุกกรณีที่ไม่ตรงกับคิวรี (NOT):
<div class="doc">Not-screen demo (affects print/speech only)</div>
หลายคิวรีด้วย ,
คั่นคิวรีหลายรายการด้วยเครื่องหมายจุลภาค เช่นเดียวกับรายการตัวเลือก สไตล์จะมีผลหากคิวรีใดก็ตามตรงตามเงื่อนไข (ANY)
<div class="page">
Multiple queries with comma
<div class="nav-drawer">Nav drawer (hidden on wide screens or print)</div>
</div>
จุดแบ่งแบบใช้หน่วย em
การใช้หน่วย em สำหรับจุดแบ่งแทน px ทำให้จุดแบ่งปรับตามการตั้งค่าขนาดแบบอักษรของเบราว์เซอร์ที่ผู้ใช้เลือก ซึ่งช่วยเพิ่มความสามารถในการเข้าถึง
<div class="box">Em-based breakpoints</div>
ตรวจสอบความเข้าใจอย่างรวดเร็ว
มีเดียคิวรีใดตรงกับหน้าจอที่มีความกว้างอย่างน้อย 1024px
สรุปทบทวน
มีเดียคิวรีใช้ CSS ตามเงื่อนไข โดยอิงจากลักษณะของอุปกรณ์หรือวิวพอร์ต ใช้ min-width สำหรับแนวทางที่เริ่มจากมือถือเป็นหลัก และใช้ max-width สำหรับแนวทางที่เริ่มจากเดสก์ท็อปเป็นหลัก กำหนดจุดแบ่งตามความต้องการของเนื้อหา ไม่ใช่ตามขนาดอุปกรณ์ที่เลือกมาแบบไม่มีหลักเกณฑ์ ไวยากรณ์ช่วงแบบสมัยใหม่ช่วยให้อ่านได้ง่ายขึ้น
คำถามที่พบบ่อย
บทเรียน “ไวยากรณ์และจุดแบ่งหน้าจอทั่วไป” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ไวยากรณ์และจุดแบ่งหน้าจอทั่วไป” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ไวยากรณ์และจุดแบ่งหน้าจอทั่วไป”
เรียนรู้ไวยากรณ์ของมีเดียคิวรีและจุดแบ่งหน้าจอมาตรฐานที่ใช้ในการออกแบบเว็บไซต์สมัยใหม่ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ไวยากรณ์และจุดแบ่งหน้าจอทั่วไป” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ไวยากรณ์และจุดแบ่งหน้าจอทั่วไป
- คิวรีความกว้าง ความสูง และแนวหน้าจอ
- Prefers-Color-Scheme และ Prefers-Reduced-Motion
- การรวมมีเดียคิวรีหลายรายการ