LibraTool logoLibraTool

Акысыз Пиксель-REM конверттегич

px, rem, em, pt, vw, vh жана % ортосунда ыңгайлаштырылуучу негизги арип өлчөмү менен конверттеңиз. Кеңири таралган пиксель өлчөмдөрү үчүн шилтеме таблицасын камтыйт.

Жүктөлгөндөн кийин оффлайн иштейт
1rem

Контекст (rem/em/vw/vh/%'ге таасир этет)

16 px үчүн бардык түрлөндүрүүлөр

Эң жакын Tailwind токендери (тамыр 16px учурда)

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

Чапталган CSSти айландыруу

Бул кантип иштейт

Бардык айландыруу нөл көз карандылык менен кол менен жазылган арифметика кыймылдаткычы колдонуп толугу менен браузериңизде болот. Курал жети 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'ge чейин) жана анын боштук масштабын — сканерлеп, абсолюттук аралык боюнча эң жакын дал келүүнү табат. = белгиси маани так токен экенин билдирет; ≈ ал эң жакын болжол экенин билдирет.
  4. 4
    Регекс аркылуу топтомдук CSS кайра жазуу
    Чаптоо-CSS панели чийки CSS текстин кабыл алат жана регекс алмаштыруу колдонот: px→rem режиминде ал ар бир px токенин дал келтирип, сандык бөлүгүн value/baseFontPx + rem менен алмаштырат; rem→px режиминде тескерисин жасайт. Канча маани кайра жазылганын текшериш үчүн алмаштыруу саны көрсөтүлөт.

Байланыштуу куралдар

📏

Бирдиктерди конвертерлөө

Узундуктун, салмактын, температуранын, аянттын, көлөмдүн жана башкалардын бирдиктеринин ортосунда которуу.

Байкап көрүңүз
📐

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

Ыкчам типография жана боштуктар үчүн ийкемдүү CSS clamp() маанисин жаратыңыз. Мин/макс өлчөмдү жана көрүнүш аймагы диапазонун коюп, түз алдын ала көрүңүз жана бир сапта CSS-ти көчүрүп алыңыз.

Байкап көрүңүз
🟦

CSS Grid генератору

CSS торду визуалдык түрдө түзүңүз — тректер, бирдиктер жана боштуктар — жана даяр CSS менен HTML кодун көчүрүп алыңыз.

Байкап көрүңүз

Көп берилүүчү суроолор