ข้ามไปยังเนื้อหาหลัก
LibraTool logoLibraTool

แปลง Pixel เป็น REM ฟรี

แปลงระหว่าง px, rem, em, pt, vw, vh และ % พร้อมขนาดฟอนต์ฐานที่ตั้งค่าได้ มีตารางอ้างอิงขนาด pixel ทั่วไป

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว
1rem

บริบท (ส่งผลต่อ rem/em/vw/vh/%)

การแปลงทั้งหมดสำหรับ 16 px

โทเค็น Tailwind ที่ใกล้ที่สุด (ที่ 16px root)

ขนาดพิกเซลทั่วไป → rem (ที่ฐาน 16px)

แปลง CSS ที่วาง

การใช้งานทั่วไป

  • PX ถึง REM สำหรับการพัฒนาเว็บแปลงค่าพิกเซลเป็นหน่วย rem สำหรับ CSS ที่ปรับขนาดได้และเข้าถึงได้ ตั้งค่าขนาดฟอนต์พื้นฐานของคุณและดูค่าเทียบเท่าทั้งหมดทันที
  • CSS Units สำหรับการออกแบบแบบตอบสนองแปลงระหว่าง px vw vh และ % เพื่อสร้างเลย์เอาต์ที่ตอบสนองอย่างถูกต้องต่อขนาดหน้าจออื่น ๆ และการวางแนว
  • แปลงข้อกำหนดการออกแบบเป็น CSS Unitsแปลค่าพิกเซล Figma หรือ Sketch เป็นหน่วย rem/em สำหรับการดำเนินการ CSS ที่สะอาดและปรับขนาดได้
  • รีความหมาย Tailwind CSS Unitเข้าใจว่าคลาสขนาด Tailwind CSS จับคู่กับค่าพิกเซลและ rem สำหรับการดำเนินการที่ถูกต้อง
  • แปลง CSS Units สำหรับแผ่นลักษณ์พิมพ์แปลงระหว่าง px pt และ rem สำหรับแบบสอบถามสื่อพิมพ์และเอาต์พุต CSS ของ PDF

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

การแปลงทั้งหมดทำงานในเบราว์เซอร์ด้วยเอนจินเลขคณิตที่เขียนขึ้นเองโดยไม่พึ่งพาสิ่งใด เครื่องมือแปลงระหว่างหน่วย CSS เจ็ดหน่วย (px, rem, em, pt, vw, vh และ %) โดยส่งทุกการคำนวณผ่านพิกเซลเป็นฐานร่วม ใช้การหารหรือคูณง่าย ๆ กับขนาดฟอนต์ราก ขนาดฟอนต์ของพาเรนต์ หรือขนาด viewport ที่ตั้งไว้

  1. 1
    ตั้งค่าบริบท
    ก่อนแปลง คุณตั้งค่าตัวเลขสี่ตัวที่ทำให้หน่วย CSS แบบสัมพัทธ์มีความหมาย: ขนาดฟอนต์ราก (ค่าเริ่มต้น 16px ซึ่งเป็นค่าเริ่มต้นของเบราว์เซอร์) ขนาดฟอนต์ขององค์ประกอบพาเรนต์ (สำหรับการแปลง em และ %) และความกว้างและความสูงของ viewport (สำหรับ vw และ vh) เป็นค่าเดียวกับที่เบราว์เซอร์ใช้เมื่อแปลง CSS ขณะทำงาน
  2. 2
    พิกเซลเป็นตัวกลางสากล
    ตัวแปลงเรียก toPixels() ก่อนเพื่อทำอินพุตให้เป็นจำนวนพิกเซลดิบ — เช่น 1.5rem กลายเป็น 1.5 × baseFontPx และ 50vw กลายเป็น 0.5 × vpWidth จากนั้น fromPixels() หารจำนวนพิกเซลนั้นด้วยตัวประกอบที่เหมาะสมกับหน่วยเป้าหมาย ทั้งเจ็ดหน่วยแสดงพร้อมกันในตารางการแปลง
  3. 3
    ค้นหาโทเค็น Tailwind ที่ใกล้ที่สุด
    หลังแปลง เครื่องมือคำนวณค่า rem และไล่ตารางค้นหาที่กำหนดไว้สองตาราง — โทเค็นขนาดฟอนต์สิบสามตัวของ Tailwind (text-xs ถึง text-9xl) และมาตราระยะห่าง — หาค่าที่ใกล้ที่สุดตามระยะห่างสัมบูรณ์ เครื่องหมาย = หมายความว่าค่าตรงกับโทเค็นพอดี ≈ หมายถึงค่าประมาณที่ใกล้ที่สุด
  4. 4
    เขียน CSS ใหม่เป็นชุดผ่าน regex
    แผงวาง CSS รับข้อความ CSS ดิบและใช้การแทนที่ regex: ในโหมด px→rem จะจับทุกโทเค็น px และแทนส่วนตัวเลขด้วย value/baseFontPx + rem ในโหมด rem→px ทำกลับกัน จำนวนการแทนที่แสดงให้เห็น คุณจึงตรวจได้ว่ามีกี่ค่าที่ถูกเขียนใหม่

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

📏

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

แปลงระหว่างหน่วยความยาว น้ำหนัก อุณหภูมิ พื้นที่ ปริมาตร และอื่นๆ

ลองใช้
📐

สร้าง CSS clamp()

สร้างค่า CSS clamp() แบบ fluid สำหรับ typography และ spacing ที่ responsive กำหนดขนาดต่ำสุด/สูงสุดและช่วง viewport ดูตัวอย่างสดๆ และคัดลอก CSS บรรทัดเดียว

ลองใช้
🟦

ตัวสร้าง CSS Grid

ออกแบบ CSS grid ตามภาพ — tracks, units และ gaps — และคัดลอก CSS และ HTML ที่สร้างขึ้น

ลองใช้

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