เรียกดูหน่วย CSS ทุกหน่วย — สัมบูรณ์ (px, cm, pt), อิงฟอนต์ (em, rem, ch), วิวพอร์ต (vw, dvh), container-query, กริด (fr), มุม เวลา และความละเอียด — ในแหล่งอ้างอิงที่ค้นหาและกรองตามชนิดได้ พร้อมคำอธิบาย หมายเหตุ "เมื่อไรควรใช้" และโทเค็นที่พร้อมคัดลอก ในเบราว์เซอร์ ฟรี

ทุกหน่วย CSS พร้อมคำอธิบาย ทุกอย่างทำงานในเบราว์เซอร์ของคุณจากแหล่งอ้างอิงในตัว — ไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์

ไม่มีหน่วยที่ตรงกับการค้นหาของคุณ
ลองหน่วยหรือหมวดหมู่อื่น — เช่น rem, dvh, fr หรือ angle

เกี่ยวกับ อ้างอิงหน่วย CSS

ตัวอ้างอิงหน่วย CSS (CSS Units Reference) นี้บันทึกหน่วยทุกตัวที่ภาษามีให้ใช้ รวม 45 หน่วย จัดกลุ่มตามประเภท ได้แก่ หน่วยสัมบูรณ์ (absolute) เช่น px, cm และ pt หน่วยสัมพัทธ์กับฟอนต์ (font-relative) เช่น em, rem, ch และ lh หน่วยวิวพอร์ต (viewport) ตั้งแต่ vw และ vh ไปจนถึง svh, lvh และ dvh ที่ใหม่กว่า หน่วยของ container-query เช่น cqw และ cqi หน่วย fr ของกริด รวมถึงมุม เวลา ความละเอียด และเปอร์เซ็นต์

แต่ละการ์ดให้ข้อมูลมากกว่าคำนิยาม: ตัวหน่วยที่คัดลอกได้แบบ monospace ชื่อเต็ม หมวดหมู่ คำอธิบายวิธีคำนวณแบบภาษาง่าย ๆ และหมายเหตุ “เมื่อใดควรใช้” ที่บอกว่าหน่วยนี้เหมาะกับกรณีใด และเมื่อใดควรเลือกหน่วยอื่นแทน

การค้นหาจับคู่ทั้งตัวหน่วย ชื่อ และความหมาย ดังนั้น rem, viewport width และ root ล้วนหาหน่วยของตัวเองเจอ และชิปประเภทกรองกริดให้เหลือเฉพาะตระกูลเดียว ทุกอย่างทำงานในเบราว์เซอร์ของคุณจากตัวอ้างอิงในตัว โดยไม่มีข้อมูลใดถูกส่งไปยังเซิร์ฟเวอร์

วิธีใช้ อ้างอิงหน่วย CSS

  1. ค้นหาหน่วยด้วยตัวหน่วย ชื่อ หรือความหมาย เช่น rem, viewport width หรือ angle
  2. ใช้ชิปประเภทเพื่อกรองกริดให้เหลือหน่วยสัมบูรณ์ สัมพัทธ์กับฟอนต์ วิวพอร์ต container กริด มุม เวลา ความละเอียด หรือเปอร์เซ็นต์
  3. อ่านคำอธิบายและหมายเหตุ “เมื่อใดควรใช้” ของแต่ละหน่วยเพื่อเลือกหน่วยที่เหมาะสม
  4. คลิกปุ่มคัดลอกเพื่อนำตัวหน่วยไปใช้ในสไตล์ชีตของคุณ

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

ใช้ rem สำหรับขนาดฟอนต์และสิ่งใดก็ตามที่ควรปรับขนาดตามที่ผู้ใช้ตั้งค่าไว้ เพราะ rem อ้างอิงตามขนาดฟอนต์ของราก ทำให้การตั้งค่าการเข้าถึงของเบราว์เซอร์ทำงานได้ ใช้ px สำหรับสิ่งที่ต้องคงที่ในเชิงสายตา เช่น เส้นขอบบาง ๆ

em สัมพัทธ์กับขนาดฟอนต์ขององค์ประกอบปัจจุบันเอง ดังนั้นองค์ประกอบที่ซ้อนกันจะทบค่ากันไปเรื่อย ๆ ส่วน rem จะสัมพัทธ์กับองค์ประกอบรากเสมอ ให้ผลลัพธ์ที่คาดเดาได้ นี่เป็นเหตุผลที่ rem กลายเป็นตัวเลือกเริ่มต้นสำหรับระยะห่างและมาตราส่วนตัวอักษร

เบราว์เซอร์บนมือถือแสดงและซ่อนแถบเครื่องมือของตัวเอง ทำให้ความสูงที่มองเห็นเปลี่ยนไป ในขณะที่ vh ยังคงยึดตามขนาดเลย์เอาต์ที่ใหญ่กว่า หน่วยไดนามิก dvh จะติดตามความสูงที่มองเห็นจริงเมื่อแถบเครื่องมือเลื่อนไปมา ส่วน svh/lvh ยึดตามสถานะเล็กที่สุดและใหญ่ที่สุด

fr กระจายพื้นที่ว่างของคอนเทนเนอร์กริดตามสัดส่วน: grid-template-columns: 2fr 1fr ให้คอลัมน์แรกได้พื้นที่ว่างเป็นสองเท่าของคอลัมน์ที่สอง หลังจากหักแทร็กและช่องว่างที่กำหนดตายตัวแล้ว หน่วยนี้มีอยู่เฉพาะภายในการกำหนดแทร็กของกริดเท่านั้น

หน่วยเหล่านี้กำหนดขนาดองค์ประกอบโดยสัมพัทธ์กับคอนเทนเนอร์ query ที่ใกล้ที่สุด แทนที่จะเป็นวิวพอร์ต cqw คือ 1% ของความกว้างคอนเทนเนอร์ ส่วน cqi คือ 1% ของขนาดตามแนวอินไลน์ (inline size) ทำให้คอมโพเนนต์ปรับขนาดตามกล่องที่มันอยู่ได้ โดยไม่ขึ้นกับขนาดหน้าจอ

ใช่ ทั้ง 45 หน่วยถูกบันทึกไว้ฟรีในหน้าเว็บที่ทำงานทั้งหมดในเบราว์เซอร์ของคุณ ไม่ต้องสมัครสมาชิก ไม่มีการร้องขอไปยังเซิร์ฟเวอร์

แชร์สิ่งนี้
ต้องการความช่วยเหลือ?
พบปัญหากับเครื่องมือนี้หรือไม่? แจ้งทีมงานของเรา
รายงานปัญหา

เพิ่มเครื่องมือฟรีนี้ลงในเว็บไซต์ของคุณเอง — คัดลอกและวางโค้ดด้านล่าง