แปลงหน่วย CSS — px, rem, em, pt, %

ใส่ค่า CSS ใดก็ได้ในหน่วย px, rem, em, pt หรือ % แล้วดูค่าเทียบเท่าในทุกหน่วยทันที ตั้งค่าขนาด font พื้นฐานแบบกำหนดเอง (ค่าเริ่มต้น 16px) เพื่อแปลง rem และ em ได้แม่นยำ การคำนวณทั้งหมดอัปเดตแบบ real time โดยไม่ต้องโหลดหน้าใหม่

ค่า

ขนาด font พื้นฐาน (px)

ปกติ 16px (ค่าเริ่มต้นของเบราว์เซอร์)

rem1 rem

em1 em

pt12 pt

%100 %

พื้นฐาน: 16px สำหรับ rem/em, 1 หน่วย = 16px ที่ระดับ root

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

วิธีการทำงาน

ทำไมหน่วย CSS จึงสำคัญสำหรับ responsive design

CSS มีหน่วยความยาวสองประเภทหลัก: แบบสัมบูรณ์ (px, pt, cm, mm) และแบบสัมพัทธ์ (rem, em, %, vw, vh) หน่วยสัมบูรณ์มีขนาดทางกายภาพตายตัวไม่ว่าจะอยู่ในบริบทใด ส่วนหน่วยสัมพัทธ์ปรับขนาดตามสิ่งอื่น ได้แก่ ขนาด font ที่ root, ขนาด font ของ element แม่ หรือขนาด viewport การเลือกประเภทหน่วยที่เหมาะสมจะกำหนดว่า layout ของคุณจะปรับตัวได้ดีแค่ไหนกับหน้าจอขนาดต่างๆ การตั้งค่า font ของผู้ใช้ และระดับการซูม

พิกเซล (px) ยังคงเป็นหน่วย CSS ที่ใช้บ่อยที่สุดเพราะคาดเดาได้และแม่นยำ แต่ไม่เคารพการตั้งค่าขนาด font ของเบราว์เซอร์ผู้ใช้ ผู้ใช้ที่เพิ่มขนาด font เริ่มต้นเป็น 20px เพื่อความเข้าถึงจะเห็นว่าข้อความแบบ px ไม่เปลี่ยน ขณะที่ข้อความแบบ rem จะขยายตาม นี่คือเหตุผลที่ WCAG 2.1 Success Criterion 1.4.4 (Resize Text) ตอบสนองได้ง่ายที่สุดโดยใช้หน่วยสัมพัทธ์อย่าง rem สำหรับขนาด font

px vs rem vs em: เมื่อไหรควรใช้อะไร

rem (root em) สัมพัทธ์กับขนาด font ของ root element ซึ่งค่าเริ่มต้นคือ 16px ในทุกเบราว์เซอร์ เนื่องจาก rem ผูกกับจุดอ้างอิงตายตัวเดียว (element <html>) จึงหลีกเลี่ยงผลสะสมที่ em มี ใช้ rem สำหรับขนาด font, การเว้นระยะ component และค่าใดๆ ที่ควรปรับตามการตั้งค่า font ของผู้ใช้ สูตรทั่วไป: rem = px ÷ base เช่น 24px ÷ 16 = 1.5rem

em สัมพัทธ์กับขนาด font ของ element ปัจจุบัน ซึ่งอาจกำหนดเป็น em เองก็ได้ ทำให้เกิดการสะสม `font-size: 1.2em` ในลูกที่อยู่ใน parent ที่มี `font-size: 1.2em` จะให้ผล 1.44 เท่าของขนาด root (1.2 × 1.2) ทำให้ em มีประโยชน์สำหรับการเว้นระยะที่ควรปรับตามขนาด font ในพื้นที่ (padding และ margin ภายใน component) แต่คาดเดาได้ยากสำหรับ layout ทั่วไป pt (จุด) มีประโยชน์หลักสำหรับการพิมพ์: 1pt = 1/72 นิ้ว, 72pt = 1 นิ้ว ≈ 96px บนหน้าจอ

การเลือกขนาด font พื้นฐานและการทำงานกับ design system

เบราว์เซอร์ส่วนใหญ่ใช้ 16px เป็นค่าเริ่มต้นสำหรับขนาด font ที่ root นี่คือเหตุผลที่ 1rem = 16px ในการตั้งค่าเริ่มต้นของ converter นักพัฒนาบางคนตั้งค่า `html { font-size: 62.5%; }` เพื่อให้ 1rem = 10px ทำให้คำนวณในใจได้ง่ายขึ้น (24px = 2.4rem แทน 1.5rem) เทคนิคนี้ยังเป็นที่ถกเถียงเพราะต้องรีเซ็ตขนาด font ทุกที่และอาจขัดแย้งกับการตั้งค่า accessibility

Design system สมัยใหม่ (Material Design, Apple HIG, Tailwind CSS) ใช้ modular scale สำหรับการเว้นระยะและ typography โดยทั่วไปเป็นคูณของ 4px หรือ 8px การทำงานในหน่วยเหล่านี้และแปลงเป็น rem ช่วยให้ visual rhythm สอดคล้องกันในบริบทต่างๆ ตัวอย่างเช่น Tailwind ใช้ 4px = 1 หน่วย ดังนั้นค่า 4 (16px) เท่ากับ 1rem หากไม่แน่ใจให้คงค่าพื้นฐานที่ 16px และใช้ converter นี้สำหรับค่า rem ที่แม่นยำโดยไม่ต้องคำนวณ

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

›จะแปลง px เป็น rem ได้อย่างไร?

หารค่าพิกเซลด้วยขนาด font ที่ root ด้วยค่าพื้นฐาน 16px เริ่มต้น: rem = px ÷ 16 ดังนั้น 24px = 1.5rem, 32px = 2rem, 48px = 3rem หากขนาด font ที่ root เป็น 10px (จาก `html { font-size: 62.5%; }`) ก็ rem = px ÷ 10

›ขนาด font เริ่มต้นของเบราว์เซอร์คือเท่าไหร่?

เบราว์เซอร์หลักทุกตัวใช้ 16px เป็นค่าเริ่มต้นสำหรับขนาด font ที่ root เว้นแต่ผู้ใช้จะเปลี่ยนการตั้งค่า นั่นหมายความว่า 1rem = 16px ในการตั้งค่าเริ่มต้น ผู้ใช้บางคนเพิ่มค่านี้เพื่อ accessibility ซึ่งเป็นเหตุผลสำคัญที่ควรใช้ rem แทน px สำหรับข้อความ

›rem กับ em ต่างกันอย่างไร?

rem สัมพัทธ์กับขนาด font ของ root element (<html>) เสมอ ทำให้คาดเดาได้ ส่วน em สัมพัทธ์กับขนาด font ของ element ปัจจุบันซึ่งอาจเปลี่ยนผ่านการสืบทอด ใช้ rem สำหรับค่าทั่วไป (ขนาด font ของ body, layout ของหน้า) และ em สำหรับค่าที่ควรปรับตามบริบทในพื้นที่ (padding สัมพัทธ์กับขนาด font ของ element เอง)

›1rem เท่ากับกี่พิกเซล?

ค่าเริ่มต้น 1rem = 16px หากตั้งค่า `html { font-size: 20px }` ก็ 1rem = 20px หากตั้งค่า `html { font-size: 62.5% }` (สัมพัทธ์กับค่าเริ่มต้น 16px) ก็ 1rem = 10px ช่องค่าพื้นฐานใน converter นี้ให้คุณเปลี่ยนขนาด root ที่สมมติได้

›ควรใช้ rem หรือ px สำหรับขนาด font?

ใช้ rem สำหรับขนาด font เมื่อเป็นไปได้ ข้อความแบบ rem เคารพการตั้งค่าขนาด font ในเบราว์เซอร์ของผู้ใช้ ซึ่งสำคัญสำหรับ accessibility พิกเซลไม่สนใจการตั้งค่าเบราว์เซอร์ หมายความว่าผู้ใช้ที่ต้องการข้อความขนาดใหญ่ขึ้นจะไม่ได้ประโยชน์จากการซูม (ก่อนที่การซูมของเบราว์เซอร์จะถูกนำมาใช้)

›จะแปลง px เป็น pt ได้อย่างไร?

1 จุด = 1/72 นิ้ว = 1.333 พิกเซลบนหน้าจอ สำหรับการแปลง: pt = px × 0.75 ดังนั้น 16px = 12pt จุดใช้หลักๆ ใน print CSS และเมื่อกำหนดเป้าหมายสื่อทางกายภาพ เช่น PDF หรือ print stylesheet

›% ในหน่วย CSS หมายความว่าอะไร?

เปอร์เซ็นต์ใน CSS ขึ้นอยู่กับบริบท สำหรับ font-size, 100% = ขนาด font ที่สืบทอดมา (เช่นเดียวกับ 1em) สำหรับ width/height, 100% = ขนาดของ containing block ใน converter นี้เราใช้ % เป็นเปอร์เซ็นต์ของขนาด font พื้นฐาน ดังนั้น 100% = px พื้นฐาน และ 150% = 1.5 × พื้นฐาน

›เทคนิค 62.5% คืออะไร?

การตั้งค่า `html { font-size: 62.5%; }` ทำให้ 1rem = 10px (เนื่องจาก 62.5% ของ 16px เริ่มต้น = 10px) ซึ่งทำให้การคำนวณ rem ง่ายขึ้น: 24px กลายเป็น 2.4rem แทน 1.5rem อย่างไรก็ตาม ต้องรีเซ็ตขนาด font ทุกที่ใน CSS และอาจทำให้ component ของ third-party เสียหาย design token และเครื่องมือสมัยใหม่ทำให้เทคนิคนี้จำเป็นน้อยลง

การเปิดเผย

NordVPN
Sponsored
Strict no-logs VPN with 6,400+ servers in 111 countries. Threat Protection blocks ads, trackers, and malware while you work online.
Get NordVPN →
Cloudways
Sponsored
Managed cloud hosting for WordPress and web apps on DigitalOcean, Vultr, and AWS. Fast setup, no server headaches.
Try Cloudways →
Fiverr
Sponsored
Hire freelancers for design, writing, dev, and marketing — or sell your own services. Millions of gigs at every budget.
Browse Fiverr →