Անցնել հիմնական բովանդակությանը
LibraTool logoLibraTool

Pixel-ից REM փոխակերպիչ անվճար

Փոխակերպեք px, rem, em, pt, vw, vh ու % ձևաչափերի միջև կարգավորվող հիմային տառաչափով: Ներառում է ընդհանուր pixel չափերի հղման աղյուսակ:

Աշխատում է անցանց՝ բեռնվելուց հետո
1rem

Համատեքստ (ազդում է rem/em/vw/vh/%-ի վրա)

16 px-ի բոլոր փոխարկումները

Ամենամոտ Tailwind խոհարարները (16px արմատում)

Տարածված px չափեր → rem (16px հիմքով)

Փոխակերպել տեղադրված CSS

Տարածված կիրառություններ

  • PX-ից REM վեբ զարգացման համարՓոխակերպեք պիքսելային արժեքները rem միավորների՝ մասշտաբվող և մատչելի CSS-ի համար։ Սահմանեք ձեր հիմնական տառաչափը և անմիջապես տեսեք բոլոր համարժեք արժեքները։
  • CSS միավորներ ընդարձակ դիզայնի համարՓոխել px, vw, vh և % միջեւ կառուցել դասավորություն, որ ճիշտ պատասխանել տարբեր էկրանի չափերի և կողմնորոշումներ:
  • Փոխել դիզայն սահմանումներ CSS միավորներԹարգմանել Figma կամ Sketch պիքսել արժեքներ rem/em միավորներ մաքուր, մասշտաբայ CSS իրականացում:
  • Tailwind CSS միավոր հղումՀասկանալ, թե ինչպես Tailwind CSS չափ դասեր քարտեզ պիքսել և rem արժեքներ ճշգրիտ իրականացման համար:
  • Փոխել CSS միավորներ տեղադրում ոճի թերթերի համարՓոխել px, pt և rem միջեւ տեղադրում մեդիա հարցումներ և PDF արդյունք 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) և դրա բացատագրման սանդղակը — գտնելով ամենամոտ համընկնումը բացարձակ հեռավորությամբ։ = նշանը նշանակում է, որ արժեքը ճշգրիտ նշան է. ≈-ն նշանակում է, որ դա ամենամոտ մոտարկումն է։
  4. 4
    Խմբաքանակային CSS վերաշարադրում regex-ով
    Փակցնել-CSS վահանակն ընդունում է հում CSS տեքստ և կիրառում է regex փոխարինում. px→rem ռեժիմում այն համապատասխանեցնում է ամեն px նշան և թվային մասը փոխարինում է value/baseFontPx + rem-ով. rem→px ռեժիմում այն կատարում է հակառակը։ Փոխարինումների քանակը ցուցադրվում է, որպեսզի կարողանաք ստուգել, թե քանի արժեք է վերաշարադրվել։

Առնչվող գործիքներ

📏

Միավորի փոխարկիչ

Փոխակերպեք երկարության, քաշի, ջերմաստիճանի, տարածքի, ծավալի և այլնի միավորների միջև:

Փորձեք այն
📐

CSS clamp() գեներատոր

Ստեղծեք հոսուն CSS clamp() արժեք ռեսպոնսիվ տպագրության ու բացատի: Սահմանեք նվազ/մեծ չափ ու viewport տիրույթ, տեսեք ուղիղ նախադիտում ու պատճենեք մեկ տողի CSS:

Փորձեք այն
🟦

CSS Grid Գեներատոր

Վիզուալ ներածեք CSS grid — հետքեր, միավորներ և բացեր — և պատճեն անեք ստեղծված CSS և HTML:

Փորձեք այն

Հաճախակի տրվող հարցեր