CrateX.app

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

แปลงหน่วย CSS แบบหนึ่งต่อหนึ่งระหว่าง px, rem, em, %, vw, vh, vmin, vmax, pt, cm, mm, q, ex และ ch ในเครื่องด้วยขนาดแบบอักษรรูท ขนาดแบบอักษรอ้างอิง EM วิวพอร์ต และการตั้งค่าการอ้างอิงเปอร์เซ็นต์ หน่วยสัมบูรณ์ของ CSS ใช้อัตราคงที่ 1in = 96px ส่วนการเทียบขนาดทางกายภาพหรืองานพิมพ์ต้องใช้เวิร์กโฟลว์แยกต่างหาก

จาก — พิกเซล

แตะที่ลูกศรเพื่อสลับหน่วย

หน่วยความยาว

ตัวอักษร/การจัดวาง

หน่วย viewport

เปอร์เซ็นต์

ผลลัพธ์ — สัมพัทธ์กับขนาดฟอนต์ของราก

rem

แตะที่ลูกศรเพื่อสลับหน่วย

หน่วยความยาว

ตัวอักษร/การจัดวาง

หน่วย viewport

เปอร์เซ็นต์

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

เริ่มต้นอย่างรวดเร็ว

ป้อนค่าและเลือกหน่วยต้นทาง

เลือกหน่วยปลายทางหรือใช้สลับเพื่อกลับทิศ

ตั้งค่าบริบท rem/em/%/vw/vh เมื่อจำเป็น

คัดลอกผลลัพธ์ที่แปลงแล้ว

สลับ preset viewport เพื่อตรวจสอบ vw/vh

สถานการณ์การใช้งานทั่วไป

กรณีใช้งาน

สร้างเลย์เอาต์ responsive ส่งต่อดีไซน์ให้ dev จับคู่ค่าระหว่างหน้าจอกับงานพิมพ์ และกำหนดมาตรฐานการใช้หน่วยในโค้ด

คำแนะนำการใช้งาน

กำหนดฐาน: root 16px เป็นค่าแพร่หลาย ช่วยให้คิด rem ↔ px ในหัวได้ง่าย

ใช้ rem กับข้อความ: ช่วยให้ปรับ scale ทั้งระบบและรองรับ a11y ส่วน em เหมาะกับการ scale ภายในคอมโพเนนต์

ใช้หน่วยวิวพอร์ตสำหรับการประมาณเค้าโครง: รวมกับเบรกพอยต์และข้อจำกัดต่ำสุด/สูงสุดเพื่อหลีกเลี่ยงความสุดขั้ว

ทศนิยมและการปัดเศษ: เก็บทศนิยมในระดับที่อ่านง่ายเพื่อไม่ให้เลขรกเกินไป

พารามิเตอร์และบริบท

ฐาน REM: กำหนดการแปลง rem ↔ px 16px เป็นค่าที่ใช้กันมากบนเว็บ ช่วยให้คิดในหัวง่าย หากดีไซน์ไม่ได้อิง 16px สามารถปรับชั่วคราวได้

ฐาน EM: กำหนด em และ % (เมื่ออ้างอิงคือขนาดฟอนต์) เหมาะสำหรับการ scale ภายในคอมโพเนนต์: เปลี่ยนขนาดฟอนต์ของ parent เพื่อ scale บล็อกนั้น

อ้างอิงของ %: เลือก Font size / Width / Height เป็นฐานอ้างอิง สำหรับเลย์เอาต์มักใช้อิงความกว้าง/ความสูง; สำหรับ typography ใช้อิงขนาดฟอนต์

พรีเซ็ต breakpoint: Mobile / Tablet / Desktop / Large จะตั้ง viewport ให้ด้วยเพื่อประเมินบนความกว้างต่าง ๆ จุดนี้ใช้เพื่อประเมินตอนออกแบบ ไม่ใช่ media query ที่รันจริงในเบราว์เซอร์

ขนาด viewport: ใช้ในการคำนวณ vw/vh/vmin/vmax และ % (เมื่ออ้างอิงคือความกว้าง/ความสูง) ค่าในอุปกรณ์จริงอาจต่างออกไปเพราะแถบที่อยู่ safe area และแถบเลื่อน

เคล็ดลับ: 1) 16px เป็นค่าฐานที่ใช้กันทั่วไป แต่ควรใช้ขนาดแบบอักษรที่ property นั้นใช้จริงเป็นค่าอ้างอิง EM 2) ตรวจสอบเปอร์เซ็นต์ของเลย์เอาต์โดยสลับ breakpoint 3) การควบคุมเหล่านี้ใช้สำหรับการประมาณระหว่างออกแบบและไม่แทนที่การคำนวณ DOM/CSS ขั้นสุดท้ายของเบราว์เซอร์ โดยหน่วยสัมบูรณ์ใช้ 1in = 96px เสมอ

ข้อจำกัดและความเข้ากันได้

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

ex/ch เป็นการประมาณตามขนาดฟอนต์พาเรนต์ที่นี่ ผลลัพธ์ไม่ใช่การตรวจสอบเมตริกแบบอักษร และจะแตกต่างกันไปตามแบบอักษร/เบราว์เซอร์

Classic vw/vh/vmin/vmax แตกต่างกันไปตามแถบเลื่อน/แถบที่อยู่/พื้นที่ปลอดภัย เครื่องมือนี้ไม่ได้คำนวณหน่วยสืบค้น dvh/svh/lvh, vi/vb, พื้นที่ปลอดภัย หรือคอนเทนเนอร์

การแปลงหน่วยสัมบูรณ์ของ CSS ใช้อัตราคงที่ 1in = 96px การเทียบพิกเซลทางกายภาพกับขนาดงานพิมพ์ต้องใช้เวิร์กโฟลว์อุปกรณ์หรืองานพิมพ์แยกต่างหาก ซึ่งเครื่องมือนี้ไม่ได้รองรับ

ความเป็นส่วนตัวและความปลอดภัย

การประมวลผลทำงานในเบราว์เซอร์ ค่าที่ป้อน หน่วย From/To ค่าที่แคชไว้ต่อหน่วย ขนาดแบบอักษรรูท ขนาดแบบอักษรอ้างอิง EM วิวพอร์ต ค่าอ้างอิงเปอร์เซ็นต์ และการเลือก breakpoint อาจคงอยู่ในเซสชันเบราว์เซอร์ปัจจุบันหรือที่เก็บข้อมูลของเบราว์เซอร์ หากคุณบันทึกพื้นที่ทำงานหรือเปิดใช้การซิงค์ WebDAV ค่าเหล่านี้อาจถูกบันทึกตามการตั้งค่าการซิงค์ของคุณ ผลลัพธ์ที่แปลงแล้วจะคำนวณใหม่จากค่าปัจจุบัน หน่วย และการตั้งค่าบริบท และจะไม่ถูกบันทึกเป็นผลลัพธ์แยกต่างหาก หน้านี้ไม่ดึง URL และไม่ส่งค่าไปแปลงฝั่งเซิร์ฟเวอร์ บนอุปกรณ์ที่ใช้ร่วมกัน ให้ล้างค่า การตั้งค่า และข้อมูลไซต์เมื่อจำเป็น

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

ขั้นตอนถัดไปสามารถทำต่อด้วยเครื่องมือที่เกี่ยวข้องเหล่านี้

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

เริ่มต้นอย่างรวดเร็ว

สถานการณ์การใช้งานทั่วไป

กรณีใช้งาน

คำแนะนำการใช้งาน

พารามิเตอร์และบริบท

ข้อจำกัดและความเข้ากันได้

ความเป็นส่วนตัวและความปลอดภัย

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

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

ควรใช้ px หรือ rem ดี?

ทำไม vw/vh ถึงมีพฤติกรรมต่างกันในแต่ละอุปกรณ์?

จะแปลงพิกเซลบนจอเป็นหน่วยสำหรับงานพิมพ์อย่างไร?