เครื่องมือแปลงหน่วย CSS

ป้อนค่าและเลือกหน่วยที่ต้องการแปลง ปรับการตั้งค่าขั้นสูงสำหรับการคำนวณ 'em', 'rem', 'vw', 'vh' และ '%'

จากหน่วย

ไปยังหน่วย

Common CSS Unit Conversions

From	To	Formula
px	rem	px ÷ rootFontSize
px	em	px ÷ parentFontSize
px	vw	(px ÷ viewportWidth) × 100
px	vh	(px ÷ viewportHeight) × 100
px	%	(px ÷ parentFontSize) × 100

คำอธิบายหน่วย

px (Pixels): พิกเซล; หน่วยสัมบูรณ์ที่สัมพันธ์กับอุปกรณ์แสดงผล

em: สัมพันธ์กับขนาดตัวอักษรของอีลิเมนต์แม่

rem: สัมพันธ์กับขนาดตัวอักษรของอีลิเมนต์รูท (html)

vw/vh: 1% ของความกว้างวิวพอร์ต

%: สัมพันธ์กับค่าของอีลิเมนต์แม่สำหรับคุณสมบัติเดียวกัน (เช่น ขนาดตัวอักษรของแม่สำหรับการแปลงขนาดตัวอักษร)

pt (Points): พอยต์; หน่วยสัมบูรณ์ (1pt = 1/72 ของนิ้ว)

in, cm, mm: นิ้ว; หน่วยสัมบูรณ์ (1in = 96px), เซนติเมตร; หน่วยสัมบูรณ์ (1cm ≈ 37.8px), มิลลิเมตร; หน่วยสัมบูรณ์ (1mm = 1/10 ของเซนติเมตร)

วิธีใช้ เครื่องมือแปลงหน่วย CSS

1
ป้อนค่าและหน่วย
พิมพ์ตัวเลขที่ต้องการแปลง จากนั้นเลือกหน่วยต้นทาง (From) และหน่วยปลายทาง (To) เช่น px เป็น rem
2
ตั้งค่าบริบทขั้นสูง
สำหรับหน่วยสัมพัทธ์ ให้เปิด "การตั้งค่าขั้นสูง" เพื่อกำหนดขนาดฟอนต์ราก ขนาดฟอนต์แม่ และความกว้างกับความสูงของวิวพอร์ตที่ใช้ในการคำนวณ
3
แปลง
คลิก Convert เพื่อคำนวณค่าเทียบเท่า หรือใช้ Swap เพื่อสลับหน่วยต้นทางและปลายทาง

4
คัดลอกผลลัพธ์
ใช้ "คัดลอกผลลัพธ์" เพื่อนำค่าที่แปลงแล้วไปใส่ในสไตล์ชีตของคุณ

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

มันแปลงระหว่างหน่วย CSS ใดได้บ้าง

มันแปลงระหว่าง px, em, rem, %, vw, vh, pt, in, cm และ mm คุณจึงสลับไปมาระหว่างหน่วยสัมบูรณ์กับหน่วยสัมพัทธ์แบบ responsive ที่ใช้ใน CSS สมัยใหม่ได้อย่างอิสระ

ทำไมการแปลง em, rem และวิวพอร์ตจึงต้องการการตั้งค่าเพิ่มเติม

หน่วยเหล่านั้นเป็นแบบสัมพัทธ์ ค่าพิกเซลของมันจึงขึ้นกับบริบท การตั้งค่าขั้นสูงให้คุณกำหนดขนาดฟอนต์รากสำหรับ rem ขนาดฟอนต์แม่สำหรับ em และ % และความกว้างกับความสูงของวิวพอร์ตสำหรับ vw และ vh ซึ่งทำให้ผลลัพธ์ตรงกับเลย์เอาต์จริงของคุณ

มันใช้ขนาดฟอนต์พื้นฐานเท่าใด

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

การแปลงหน่วยสัมบูรณ์แม่นยำแค่ไหน

หน่วยสัมบูรณ์เป็นไปตามข้อกำหนด CSS ซึ่ง 1in เท่ากับ 96px, 1pt เท่ากับ 1/72 นิ้ว และ 1cm ประมาณ 37.8px การแปลงระหว่าง px, pt, in, cm และ mm จึงแม่นยำ

ตัวแปลงนี้ฟรีและทำงานในเครื่องหรือไม่

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

เครื่องมือที่เกี่ยวข้อง

ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้

เครื่องมือสร้างคำนำหน้าเฉพาะของ CSS

เครื่องมือสร้าง Meta Tag

เครื่องสร้าง Robots.txt

Open Graph Previewer

เครื่องมือเข้ารหัส/ถอดรหัสเอนทิตี HTML

เครื่องมือดูส่วนหัว HTTP