ข้ามไปที่เนื้อหา
ตัวแปลงเวลาเริ่มแข่งฟุตบอลโลก เปิดใช้งานแล้วดูเวลาเริ่มแข่งตามเขตเวลาของคุณ และเพิ่มการเตือนในปฏิทิน
โลโก้ CrateX.app

CrateX.app

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

แปลงหน่วย CSS แบบหนึ่งต่อหนึ่งระหว่าง px, rem, em, %, vw, vh, vmin, vmax, pt, cm, mm, q, ex และ ch ในเครื่องด้วยขนาดแบบอักษรรูท ขนาดแบบอักษรหลัก วิวพอร์ต DPI และการตั้งค่าการอ้างอิงเปอร์เซ็นต์

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

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

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

หน่วย viewport

เปอร์เซ็นต์

สัมพัทธ์กับขนาดฟอนต์ของราก
rem
แตะที่ลูกศรเพื่อสลับหน่วย

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

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

หน่วย viewport

เปอร์เซ็นต์
ตัวแปลงหน่วย CSS

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

1
ป้อนค่าและเลือกหน่วยต้นทาง
2
เลือกหน่วยปลายทางหรือใช้สลับเพื่อกลับทิศ
3
ตั้งค่าบริบท rem/em/%/vw/vh เมื่อจำเป็น
4
คัดลอกผลลัพธ์ที่แปลงแล้ว
5
สลับ 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 และแถบเลื่อน
DPI (จุดต่อนิ้ว): สำหรับหน่วยทางกายภาพ pt/pc/in/cm/mm/q ↔ px ค่าประมาณ CSS เริ่มต้นคือ 96 DPI; ค่าที่กำหนดเองเป็นการประมาณการพิมพ์/อุปกรณ์ ไม่ใช่การคำนวณโครงร่างสุดท้ายของเบราว์เซอร์
เคล็ดลับ: 1) 16px และ 96 DPI เป็นฐานทั่วไป 2) ตรวจสอบเปอร์เซ็นต์โครงร่างโดยการสลับเบรกพอยต์ 3) การควบคุมเหล่านี้ช่วยในการประมาณเวลาออกแบบ และไม่ได้แทนที่การคำนวณ DOM/CSS สุดท้ายของเบราว์เซอร์

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

% การอ้างอิงขึ้นอยู่กับคุณสมบัติ CSS ที่มีบล็อกและโหมดโครงร่าง เครื่องมือนี้ใช้การอ้างอิงขนาดแบบอักษร/ความกว้างวิวพอร์ต/ความสูงของวิวพอร์ตที่เลือกสำหรับการประมาณค่า ไม่ใช่การวัดพาเรนต์/คอนเทนเนอร์แบบสด
ex/ch เป็นการประมาณตามขนาดฟอนต์พาเรนต์ที่นี่ ผลลัพธ์ไม่ใช่การตรวจสอบเมตริกแบบอักษร และจะแตกต่างกันไปตามแบบอักษร/เบราว์เซอร์
Classic vw/vh/vmin/vmax แตกต่างกันไปตามแถบเลื่อน/แถบที่อยู่/พื้นที่ปลอดภัย เครื่องมือนี้ไม่ได้คำนวณหน่วยสืบค้น dvh/svh/lvh, vi/vb, พื้นที่ปลอดภัย หรือคอนเทนเนอร์
หน่วยทางกายภาพ ↔ px ใช้ค่าประมาณ DPI ที่กำหนดค่าไว้ งานพิมพ์/HiDPI ยังคงต้องมีการตรวจสอบอุปกรณ์หรือหลักฐาน

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

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

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

4

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

แหล่งข้อมูล

คู่มือ

เกี่ยวกับเรา

เกี่ยวกับเรา
ราคา

ข้อมูลทางกฎหมาย

เงื่อนไขการใช้บริการ
นโยบายความเป็นส่วนตัว
นโยบายคุกกี้

การตั้งค่าของคุณ

จัดการคุกกี้

การประมวลผลของเครื่องมือทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ของคุณแบบในเครื่อง