คิวรีความกว้าง ความสูง และแนวหน้าจอ
กำหนดเป้าหมายตามขนาดพื้นที่แสดงผลและแนวการวางอุปกรณ์เฉพาะด้วยฟีเจอร์มีเดีย
คิวรีความกว้าง ความสูง และแนวหน้าจอ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณลักษณะสื่อ width
คุณลักษณะ width กำหนดเป้าหมายที่ความกว้างของวิวพอร์ต ใช้ min-width และ max-width เพื่อกำหนดช่วง
<div class="box">width feature demo</div>
คุณลักษณะสื่อ height
คุณลักษณะ height กำหนดเป้าหมายที่ความสูงของวิวพอร์ต มีประโยชน์สำหรับวิวพอร์ตที่เตี้ย เช่น โทรศัพท์ในแนวนอน ซึ่งมีพื้นที่แนวตั้งจำกัด
<div class="hero">Hero (grows on tall viewports)</div>
รูปแบบสำหรับวิวพอร์ตเตี้ย
ตรวจจับวิวพอร์ตที่เตี้ยและลดระยะห่างหรือความสูงที่อาจทำให้เนื้อหาล้นออกมา:
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation: portrait และ landscape
คุณลักษณะ orientation ตรวจจับว่าวิวพอร์ตสูงกว่า (portrait) หรือกว้างกว่า (landscape) เมื่อเปรียบเทียบกับอีกทิศทางหนึ่ง
<div class="hero">Orientation-aware hero</div>
อัตราส่วนพิกเซลของอุปกรณ์
กำหนดเป้าหมายหน้าจอที่มีความละเอียดสูง (Retina) ด้วยคุณลักษณะ resolution หรือ -webkit-device-pixel-ratio ซึ่งไม่ใช่มาตรฐานแต่รองรับอย่างแพร่หลาย
<div class="logo"></div>
คุณลักษณะ aspect-ratio
กำหนดเป้าหมายอัตราส่วนภาพของวิวพอร์ตที่เจาะจง มีประโยชน์สำหรับจัดกึ่งกลางเนื้อหาให้แตกต่างกันระหว่างวิวพอร์ต 4:3 และ 16:9
<div class="video"></div>
ความสามารถ hover
คุณลักษณะ hover: hover ตรวจจับว่าอินพุตหลักเป็นตัวชี้ที่แม่นยำและสามารถวางเมาส์เหนือองค์ประกอบได้หรือไม่ มีประโยชน์สำหรับสไตล์เฉพาะอุปกรณ์สัมผัส
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
คุณลักษณะ pointer
pointer: fine คือตัวชี้เมาส์ที่แม่นยำ ส่วน pointer: coarse คือนิ้วหรือปากกาสไตลัส มีประโยชน์สำหรับการปรับขนาดพื้นที่เป้าหมายสำหรับการแตะ
<button>Tap target</button>
การรวม width และ height
สร้างกฎเฉพาะสำหรับโทรศัพท์แนวนอนโดยรวม min-width เข้ากับ max-height:
<div class="nav">Nav bar</div>
ขนาดวิวพอร์ตเทียบกับขนาดอุปกรณ์
มีเดียคิวรีของ CSS กำหนดเป้าหมายที่ วิวพอร์ต (หน้าต่างเบราว์เซอร์) ไม่ใช่ขนาดหน้าจอจริงของอุปกรณ์ การปรับขนาดหน้าต่างเบราว์เซอร์บนเดสก์ท็อปจะเปลี่ยนความกว้างของวิวพอร์ตแบบเรียลไทม์
หน่วยวิวพอร์ตและมีเดียคิวรี
มีเดียคิวรีและหน่วยวิวพอร์ต (vw, vh) ตอบสนองต่อขนาดวิวพอร์ตเดียวกัน ใช้มีเดียคิวรีสำหรับการเปลี่ยนเลย์เอาต์ และใช้หน่วยวิวพอร์ตสำหรับการกำหนดขนาดที่ปรับตามหน้าจอภายในเลย์เอาต์
ตรวจสอบความเข้าใจอย่างรวดเร็ว
คุณลักษณะสื่อใดตรวจจับว่าอุปกรณ์มีตัวชี้ที่แม่นยำและสามารถวางเมาส์เหนือองค์ประกอบได้
สรุปทบทวน
คุณลักษณะของสื่อประกอบด้วย width, height, orientation, resolution, hover และ pointer ใช้คุณลักษณะเหล่านี้เพื่อปรับเลย์เอาต์ตามขนาดวิวพอร์ตและความสามารถของอุปกรณ์ คุณลักษณะ hover และ pointer ช่วยกำหนดเป้าหมายสำหรับอุปกรณ์สัมผัสหรือเมาส์ได้ นอกเหนือจากการพิจารณาเพียงขนาดหน้าจอ
คำถามที่พบบ่อย
บทเรียน “คิวรีความกว้าง ความสูง และแนวหน้าจอ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “คิวรีความกว้าง ความสูง และแนวหน้าจอ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “คิวรีความกว้าง ความสูง และแนวหน้าจอ”
กำหนดเป้าหมายตามขนาดพื้นที่แสดงผลและแนวการวางอุปกรณ์เฉพาะด้วยฟีเจอร์มีเดีย คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “คิวรีความกว้าง ความสูง และแนวหน้าจอ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ไวยากรณ์และจุดแบ่งหน้าจอทั่วไป
- คิวรีความกว้าง ความสูง และแนวหน้าจอ
- Prefers-Color-Scheme และ Prefers-Reduced-Motion
- การรวมมีเดียคิวรีหลายรายการ