CSS Academy · บทเรียน

หน่วยสัมบูรณ์: px pt และ cm

เรียนรู้ว่าเมื่อใดควรใช้หน่วยสัมบูรณ์แบบคงที่ เช่น พิกเซล พอยต์ และเซนติเมตร

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

หน่วยสัมบูรณ์เทียบกับหน่วยสัมพัทธ์

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

px — พิกเซล

พิกเซล (px) เป็นหน่วยสัมบูรณ์ที่ใช้มากที่สุดบนหน้าจอ สำหรับจอแสดงผลมาตรฐาน 1px = 1 พิกเซลของอุปกรณ์ บนหน้าจอความละเอียดสูง (เรตินา) พิกเซลของ CSS จะสอดคล้องกับพิกเซลของอุปกรณ์หลายพิกเซล ทำให้องค์ประกอบมีขนาดที่มองเห็นเท่าเดิม

<button class="button">10px 20px padding</button>

pt — จุด

จุด (pt) เป็นหน่วยจากงานออกแบบสิ่งพิมพ์: 1pt = 1/72 ของหนึ่งนิ้ว ใน CSS 1pt = 4/3px (ประมาณ 1.33px) โดยหลักแล้วใช้ในสไตล์ชีตสำหรับสิ่งพิมพ์เพื่อกำหนดรูปแบบตัวอักษร

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm, mm, in — หน่วยทางกายภาพ

CSS รองรับเซนติเมตร (cm), มิลลิเมตร (mm) และนิ้ว (in) หน่วยเหล่านี้เหมาะกับบริบทงานพิมพ์ แต่ไม่น่าเชื่อถือบนหน้าจอ เนื่องจาก DPI ของหน้าจอแตกต่างกัน

<div class="page">A4-width page (21cm), used for print layouts</div>

px บนหน้าจอ: การใช้งานจริง

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

อัตราส่วนพิกเซลของอุปกรณ์

จอแสดงผลสมัยใหม่มี อัตราส่วนพิกเซลของอุปกรณ์ (DPR) มากกว่า 1 หน้าจอเรตินาแบบ 2x จะแสดงผล 2 พิกเซลของอุปกรณ์ต่อ 1 พิกเซลของ CSS นี่คือเหตุผลที่รูปภาพความละเอียดสูงต้องมีขนาดเป็น 2 หรือ 3 เท่าของขนาดที่แสดง

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

เมื่อใดควรใช้ px

ใช้ px สำหรับ:

ความกว้างของเส้นขอบ (1px คมชัด)
เงาและการแปลง
จุดแบ่งของคำสั่งสื่อ (แม้จุดแบ่งที่อิง em จะยืดหยุ่นกว่า)
องค์ประกอบส่วนติดต่อผู้ใช้แบบคงที่ที่ต้องควบคุมพิกเซลอย่างแม่นยำ

เมื่อ NOT ควรใช้ px กับตัวอักษร

การกำหนด font-size: 16px ให้กับ html หรือ body จะเขียนทับค่ากำหนดด้านการเข้าถึงของผู้ใช้ในเบราว์เซอร์หลายรุ่น ให้ใช้ rem ที่อิงกับค่าเริ่มต้นของเบราว์เซอร์แทน

Q — หนึ่งในสี่มิลลิเมตร

หน่วย q มีค่าเท่ากับหนึ่งในสี่ของมิลลิเมตร ใช้ในงานพิมพ์ตัวอักษรภาษาญี่ปุ่นเพื่อควบคุมรูปแบบตัวอักษรอย่างละเอียด ไม่ค่อยใช้ในการออกแบบเว็บไซต์ทั่วไป

PC — ไพกา

ไพกา (pc) มีค่าเท่ากับ 12 จุด หรือ 1/6 ของหนึ่งนิ้ว เช่นเดียวกับจุด ไพกาเป็นหน่วยสำหรับงานพิมพ์ที่แทบไม่จำเป็นสำหรับหน้าจอดิจิทัล

หน่วยสัมบูรณ์ในสไตล์ชีตสำหรับสิ่งพิมพ์

สไตล์ชีตสำหรับสิ่งพิมพ์เป็นกรณีใช้งานหลักที่เหมาะสมสำหรับหน่วยสัมบูรณ์ใน CSS หน่วยทางกายภาพช่วยให้หน้าที่พิมพ์ออกมามีขนาดถูกต้องบนกระดาษ

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

ตรวจสอบอย่างรวดเร็ว

หน่วยสัมบูรณ์ของ CSS ใดมีค่าเท่ากับ 1/72 ของหนึ่งนิ้ว

สรุปทบทวน

หน่วยสัมบูรณ์เป็นค่าการวัดคงที่ที่ไม่ขึ้นกับองค์ประกอบแม่ px เป็นหน่วยที่ใช้งานได้จริงบนหน้าจอ หน่วยทางกายภาพ (pt, cm, in) ใช้ในสไตล์ชีตสำหรับสิ่งพิมพ์ หลีกเลี่ยงการใช้ px กับตัวอักษร เพราะจะเขียนทับค่ากำหนดขนาดแบบอักษรของผู้ใช้ ให้ใช้ rem แทน

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

บทเรียน “หน่วยสัมบูรณ์: px pt และ cm” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “หน่วยสัมบูรณ์: px pt และ cm”

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

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

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

บทเรียน “หน่วยสัมบูรณ์: px pt และ cm” ใช้เวลานานแค่ไหน

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

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

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

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

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