Негізгі мазмұнға өту
LibraTool logoLibraTool

Пиксельді REM-ге конвертер — тегін

px, rem, em, pt, vw, vh және % арасында реттелетін негіз қаріп өлшемімен айналдырыңыз. Кең таралған пиксель өлшемдері үшін анықтамалық кестені қамтиды.

Жүктелгеннен кейін офлайн жұмыс істейді
1rem

Контекст (rem/em/vw/vh/%-ке әсер етеді)

16 px үшін барлық түрлендірулер

Ең жақын Tailwind токендері (16px түбік бойынша)

Жалпы пиксель өлшемдері → rem (16px базасында)

Орналастырылған CSS ті айналдыру

Жиі қолданылуы

  • Веб Дамуы үшін PX-дан REM-геПиксель мәндерін масштабталатын және қол жеткіштіктілік CSS для rem бірлігіне айналдырыңыз. Негіз шрифт өлшемін орнатыңыз және барлық балық-балығын дірілікке қарап өтіңіз.
  • Жауап Беретін Дизайн үшін CSS БірліктеріТүрлі экран өлшемдері мен бағыттарымен дұрысты жауап беретін макеттерді құру үшін px, vw, vh және % арасында айналдырыңыз.
  • Дизайн Спецификасын CSS Бірліктеріне АйналдырыңызFigma немесе Sketch пиксель мәндерін таза, масштабталатын CSS орындауы үшін rem/em бірліктеріне аударыңыз.
  • Tailwind CSS Бірлік АнықтамасыTailwind CSS өлшем сыныптарының дәл орындау үшін пиксель және rem мәндеріне қалай карталандырылғанын білініңіз.
  • Басу Стиль Парақтары үшін CSS Бірліктерін АйналдырыңызБасу медиа сұрағы және PDF шығыс CSS үшін px, pt және rem арасында айналдырыңыз.

Қалай жұмыс істейді

Барлық түрлендіру нөлдік тәуелділікпен қолмен жазылған арифметика қозғалтқышын пайдаланып толығымен браузеріңізде жүреді. Құрал жеті CSS бірлігі (px, rem, em, pt, vw, vh және %) арасында әр есептеуді ортақ негіз ретінде пикселдер арқылы бағыттап, бапталған түбір қаріп өлшеміңізге, ата-ана қаріп өлшеміне немесе көрініс терезесі өлшемдеріне қарсы жай бөлу немесе көбейту қолданып түрлендіреді.

  1. 1
    Контекст мәндерін орнатыңыз
    Түрлендірмес бұрын, салыстырмалы CSS бірліктерін мағыналы ететін төрт санды бапталайсыз: түбір қаріп өлшемі (әдепкі 16px, браузер әдепкісі), ата-ана элементінің қаріп өлшемі (em және % түрлендірулері үшін) және көрініс терезесінің ені мен биіктігі (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 қайта жазу
    Қою-CSS панелі шикі CSS мәтінін қабылдайды және регекс алмастыруын қолданады: px→rem режимінде ол әр px белгісін сәйкестендіреді және сандық бөлікті value/baseFontPx + rem-мен алмастырады; rem→px режимінде ол керісінше істейді. Алмастыру саны көрсетіледі, сондықтан қанша мән қайта жазылғанын тексере аласыз.

Байланысты құралдар

📏

Өлшем Бірлігі Түрлендіргіші

Ұзындық, салмақ, температура, аудан, көлем және басқалары арасында түрлендіру.

Байқап көріңіз
📐

CSS clamp() генераторы

Адаптивті типография және бос орын үшін сұйық CSS clamp() мәнін жасаңыз. Минимум/максимум өлшем мен көрініс порт ауқымын орнатыңыз, тірі алдын ала қараңыз және бір жолды CSS-ті көшіріңіз.

Байқап көріңіз
🟦

CSS торы генераторы

CSS торын визуалды түрде құрастырыңыз — трекілер, бірліктер және аралықтар — және құрастырылған CSS және HTML-ді көшіріңіз.

Байқап көріңіз

Жиі қойылатын сұрақтар