Үндсэн агуулга руу очих
LibraTool logoLibraTool

Пиксел-г REM болгох хөрвүүлэгч — үнэгүй

Тохируулж болох үндсэн фонтын хэмжээтэйгээр px, rem, em, pt, vw, vh болон % хоорондоо хөрвүүлэх. Нийтлэг пикселийн хэмжээнүүдийн лавлах хүснэгтийг агуулна.

Ачаалагдсаны дараа офлайн ажилладаг
1rem

Нөхцөл (rem/em/vw/vh/%-д нөлөөлнө)

16 px-н бүх хөрвүүлэлт

Хамгийн ойр Tailwind токенууд (16px үндсэн дээр)

Нийтлэг пиксел хэмжээ → rem (16px суурь дээр)

Буулгасан CSS-г хөрвүүлэх

Түгээмэл хэрэглээ

  • Вэб хөгжлийн хувьд PX-ээс REMPixel утгуудыг rem нэгжид хөрвүүлэх масштабжүүлэх, хүрч болох CSS. Таны суурь фонтын размерыг тогтоож, шууд бүх эквивалент утгыг харна.
  • Адаптив дизайнд CSS нэгжүүдPx, vw, vh болон % -ийн хооронд хөрвүүлэх хэмжээ болон чиглэлээр ямар ч дэлгэцийн хэмжээ, дэлгэцийн боловнолд сайн байлгах макетыг барих.
  • Дизайн технологийн спецификацийг CSS нэгжэд хөрвүүлэхFigma эсвэл Sketch пиксел утгуудыг цэвэр, масштабжүүлэх CSS хэрэгжүүлэлтийн rem/em нэгжид орчуулах.
  • Tailwind CSS нэгж лавлагааTailwind CSS хэмжээ ангиуд pixel болон rem утгуудтай хэрхэн нийцдэг тухай нарийвчилсан хэрэгжүүлэлтийг ойлгох.
  • Хэвлэх хаалтны CSS нэгжүүдийг хөрвүүлэхХэвлэх мэдээллэл сонгох болон PDF гаралтын CSS-ийн px, pt болон rem-ийн хооронд хөрвүүлэх.

Хэрхэн ажилладаг

Бүх хөрвүүлэлт ямар ч хараат байдалгүй гараар бичсэн арифметик систем ашиглан бүхэлдээ таны хөтчид явагддаг. Хэрэгсэл долоон CSS нэгжийн (px, rem, em, pt, vw, vh, %) хооронд хөрвүүлэлтийг тооцоолол бүрийг нийтлэг суурь болгон пикселээр дамжуулан, таны тохируулсан root фонтын хэмжээ, эцэг фонтын хэмжээ эсвэл viewport хэмжээст энгийн хуваалт, үржвэрлэл хэрэглэж хийдэг.

  1. 1
    Context утгаа тохируулах
    Хөрвүүлэхээсээ өмнө та харьцангуй CSS нэгжийг утга учиртай болгодог дөрвөн тоог тохируулна: root фонтын хэмжээ (үндсэн 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
    Regex-ээр багц CSS дахин бичих
    Буулгах-CSS самбар түүхий CSS текст хүлээн авч regex орлуулга хэрэглэдэг: px→rem горимд px token бүрийг тохируулж тоон хэсгийг value/baseFontPx + rem-ээр орлуулна; rem→px горимд эсрэгээр хийдэг. Орлуулгын тоо харагдана тул та хэдэн утга дахин бичигдсэнийг шалгаж болно.

Холбоотой хэрэгслүүд

📏

Нэгж хөрвүүлэгч

Урт, жин, температур, талбай, эзлэхүүн болон бусад нэгж хооронд хөрвүүлэх.

Туршиж үзэх
📐

CSS clamp() үүсгэгч

Хариу өгч буй типограф болон зайд зориулсан шингэн CSS clamp() утгыг үүсгэх. Хамгийн бага/их хэмжээ болон харах цонхны мужийг тохируулж, шууд урьдчилан харалтыг харан нэг мөр CSS хуулах.

Туршиж үзэх
🟦

CSS торны үүсгэгч

CSS торыг нүдээр загварчил — мөр, баганын нэгж болон зай — мөн үүссэн CSS ба HTML-ийг хуул.

Туршиж үзэх

Түгээмэл асуултууд