ตัวแปลงหน่วย CSS

การแปลงหน่วย CSS คืออะไร?

ตัวแปลงหน่วย CSS คือเครื่องมือที่แปลงค่าความยาวระหว่างระบบการวัดของ CSS ที่แตกต่างกัน CSS กำหนดหน่วยความยาวมากกว่าหนึ่งโหล แบ่งออกเป็นสองกลุ่ม: หน่วยสัมบูรณ์อย่าง px, pt, cm และ in ที่แมปกับการวัดทางกายภาพที่คงที่ และหน่วยสัมพัทธ์อย่าง rem, em, vw, vh และ % ที่ขึ้นอยู่กับบริบท เช่น ขนาด font หรือขนาด viewport

เบราว์เซอร์แปลงความยาว CSS ทั้งหมดเป็น pixel ในระหว่างการแสดงผล เมื่อคุณเขียน 1.5rem เบราว์เซอร์จะคูณ 1.5 ด้วย root font-size (โดยทั่วไปคือ 16px) เพื่อได้ 24px เมื่อคุณเขียน 50vw ก็จะนำครึ่งหนึ่งของความกว้าง viewport ปัจจุบัน การเข้าใจความสัมพันธ์เหล่านี้จำเป็นสำหรับการสร้าง layout ที่ปรับขนาดตามอุปกรณ์และเคารพการตั้งค่าของผู้ใช้ เช่น ขนาด font ที่กำหนดเองในเบราว์เซอร์

ข้อกำหนด CSS Values and Units Module Level 4 (W3C) กำหนดอัตราการแปลงที่แน่นอนระหว่างหน่วยสัมบูรณ์ทั้งหมด: 1in = 96px = 72pt = 2.54cm = 25.4mm หน่วยสัมพัทธ์ไม่มีอัตราส่วนที่คงที่เพราะขึ้นอยู่กับบริบทในขณะรันไทม์ ตัวแปลงหน่วย CSS ฟรีช่วยให้คุณคำนวณความสัมพันธ์เหล่านี้ได้ทันทีตาม root font-size และขนาด viewport ของคุณ โดยไม่ต้องเขียนโค้ดใดๆ

ทำไมต้องใช้ตัวแปลงหน่วย CSS?

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

กรณีการใช้งานตัวแปลงหน่วย CSS

ข้อมูลอ้างอิงหน่วยความยาว CSS

CSS กำหนดหน่วยความยาว 10 หน่วยที่ใช้กันทั่วไป หน่วยสัมบูรณ์มีการแปลงคงที่เป็น pixel หน่วยสัมพัทธ์ขึ้นอยู่กับบริบท: root font-size สำหรับ rem, parent font-size สำหรับ em และ viewport ของเบราว์เซอร์สำหรับ vw และ vh

หน่วยสัมบูรณ์ vs หน่วยสัมพัทธ์ใน CSS

การเลือกระหว่างหน่วยสัมบูรณ์และหน่วยสัมพัทธ์ส่งผลต่อการตอบสนองของ layout ต่อหน้าจอและการตั้งค่าผู้ใช้ที่แตกต่างกัน แต่ละกลุ่มมีข้อดีข้อเสียที่แตกต่างกัน

ตารางแปลง px เป็น rem ที่พบบ่อย

ตารางนี้ถือว่า root font-size เป็น 16px (ค่าปริยายของเบราว์เซอร์) หากโปรเจกต์ของคุณใช้ base ที่แตกต่างกัน ให้หารค่า pixel ด้วย base ของคุณเพื่อได้ค่าเทียบเท่าใน rem

ตัวอย่างโค้ด

ตัวอย่างเหล่านี้แสดงวิธีแปลงหน่วย CSS ด้วยโปรแกรมใน JavaScript, Python, CSS custom properties และ Sass

// px to rem (given root font-size of 16px)
const pxToRem = (px, base = 16) => px / base
pxToRem(24)  // → 1.5

// rem to px
const remToPx = (rem, base = 16) => rem * base
remToPx(1.5) // → 24

// px to vw (given viewport width of 1440px)
const pxToVw = (px, viewport = 1440) => (px / viewport) * 100
pxToVw(360)  // → 25

// Dynamic calculation using getComputedStyle
const rootFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
) // → 16 on most browsers

# CSS unit converter functions

def px_to_rem(px: float, base: float = 16) -> float:
    return px / base

def rem_to_px(rem: float, base: float = 16) -> float:
    return rem * base

def px_to_vw(px: float, viewport: float = 1440) -> float:
    return (px / viewport) * 100

def px_to_pt(px: float) -> float:
    return px * 72 / 96

print(px_to_rem(24))     # → 1.5
print(rem_to_px(2.5))    # → 40.0
print(px_to_vw(720))     # → 50.0
print(px_to_pt(16))      # → 12.0

/* Define a base scale using rem */
:root {
  --base: 16px;       /* root font-size */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-4: 1rem;    /* 16px */
  --space-8: 2rem;    /* 32px */
}

/* Fluid typography: scales between 1rem (16px) and 2.5rem (40px) */
h1 {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Viewport-relative hero height */
.hero {
  height: calc(100vh - 4rem); /* full viewport minus 64px header */
}

/* Percentage-based grid */
.sidebar { width: 25%; }     /* 360px on 1440px screen */
.content { width: 75%; }     /* 1080px on 1440px screen */

// Reusable px-to-rem function in Sass
@use "sass:math";

$base-font-size: 16px !default;

@function rem($px) {
  @return math.div($px, $base-font-size) * 1rem;
}

// Usage
.card {
  padding: rem(24px);       // → 1.5rem
  margin-bottom: rem(32px); // → 2rem
  border-radius: rem(8px);  // → 0.5rem
  font-size: rem(14px);     // → 0.875rem
}

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