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 ва %) бо гузаронидани ҳар ҳисобкунӣ тавассути пиксел ҳамчун пойаи муштарак табдил медиҳад, тақсим ё зарби соддаро дар муқобили андозаи шрифти решаи танзимшуда, андозаи шрифти волидайн ё андозаҳои 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-ро мувофиқат карда, қисми рақамиро бо қиммат/baseFontPx + rem иваз мекунад; дар ҳолати rem→px он баръаксро мекунад. Шумориши иваз нишон дода мешавад, бинобар ин метавонед санҷед, ки чанд қиммат аз нав навишта шудааст.

Абзорҳои марбут

📏

Табдилдиҳандаи воҳид

Табдил додани воҳидҳои дарозӣ, вазн, ҳарорат, майдон, ҳаҷм ва ғайра.

Кӯшиш кунед
📐

Тавлидкунандаи CSS clamp()

Арзиши равони CSS clamp()-ро барои шрифт ва фосилаи ҷавобгӯй тавлид кунед. Андозаи ҳадди ақал/ҳадди аксар ва диапазони viewport-ро гузоред, пешнамоиши зинда бубинед ва CSS-и якхаттаро нусхабардорӣ кунед.

Кӯшиш кунед
🟦

Тавлидгари шабакаи CSS

Шабакаи CSS-ро ба таври намоён тарҳрезӣ кунед — трекҳо, воҳидҳо ва фосилаҳо — ва CSS ва HTML тавлидшударо нусхабардорӣ кунед.

Кӯшиш кунед

Саволҳои зуд-зуд додашаванда