LibraTool logoLibraTool

Beddelaha Pixel ilaa REM oo Bilaash ah

U beddel px, rem, em, pt, vw, vh, iyo % oo leh cabbirka far-qoraalka asaasiga ah oo la habayn karo. Waxaa ku jira jadwal tixraac ah oo loogu talagalay cabbirrada pixel-ka caadiga ah.

Wuu shaqeeyaa oflaayn marka la shubo
1rem

Macnaha guud (waxay saameysaa rem/em/vw/vh/%)

Dhammaan isbeddellada 16 px

Astaamaha Tailwind ee ugu dhow (root-ka 16px)

Cabbirrada pixel-ka ee caadiga ah β†’ rem (asalka 16px)

U beddel CSS-ka la dhejiyay

Sida Ay U Shaqeyso

Dhammaan beddelku wuxuu gebi ahaanba ka shaqeeyaa biraawsarkaaga isagoo isticmaalaya injineer xisaab oo gacan lagu qoray oo eber ku-tiirsanaan ah. Qalabku wuxuu u beddelaa toddoba unug CSS (px, rem, em, pt, vw, vh, iyo %) isagoo xisaab kasta ka mariya pixels saldhig guud ahaan, isagoo dabaqaya qaybin ama isku-dhufasho fudud ka dhanka ah cabbirka farta root-ka aad dejisay, cabbirka farta waalidka, ama cabbirrada viewport-ka.

  1. 1
    Deji qiyamka goobtaada
    Ka hor inta aad beddelin, waxaad dejisaa afarta lambar ee unugyada CSF-ka la xiriira macnaha u dhigaya: cabbirka farta root-ka (16px default ah, oo ah default-ka biraawsarka), cabbirka farta unugga waalidka (beddellada em iyo %), iyo ballaadhka iyo dhererka viewport-ka (vw iyo vh). Kuwani waa isla qiyamka biraawsarkaagu isticmaali lahaa markuu xalinayo CSS wakhtiga socodka.
  2. 2
    Pixel ahaan dhexdhexaadka caalamiga ah
    Beddelahu marka hore wuxuu wacaa toPixels() si uu gelitaankaaga ugu caadiyo tirin pixel qaawan β€” tusaale, 1.5rem waxay noqotaa 1.5 Γ— baseFontPx, 50vw-na waxay noqotaa 0.5 Γ— vpWidth. Kadibna fromPixels() wuxuu tirinta pixel-ka u qaybiyaa faktarka ku habboon unugga bartilmaameedka. Dhammaan toddobada unug waxaa isla mar lagu muujiyaa miiska beddelka.
  3. 3
    Raadinta calaamadda Tailwind ee ugu dhow
    Ka dib marka la beddelo, qalabku wuxuu xisaabiyaa qiimaha rem wuxuuna sahamiyaa laba miis raadin oo go'an β€” saddex iyo tobanka calaamadood ee cabbirka farta Tailwind (text-xs ilaa text-9xl) iyo miisaankiisa bannaanka β€” isagoo helaya u-dhigmaha ugu dhow fogaanta qaawan. Calaamadda = macneheedu waa qiimuhu waa calaamad sax ah; β‰ˆ macneheedu waa ku dhawaanshaha ugu dhow.
  4. 4
    Dib-u-qoritaan CSS wadar-wadar ah via regex
    Panel-ka dhajinta CSS wuxuu aqbalaa qoraal CSS ceyriin ah wuxuuna dabaqaa beddel regex ah: habka px→rem wuxuu u dhigmaa calaamad px kasta wuxuuna beddelaa qaybta tirsan qiimaha/baseFontPx + rem; habka rem→px wuxuu sameeyaa kan rogan. Tirada beddellada waa la muujiyaa si aad u hubiso immisa qiimo la dib-u-qoray.

Qalabka La Xiriira

πŸ“

Beddelaha Halbeegga

U beddel halbeegyada dhererka, miisaanka, heerkulka, bedka, mugga, iyo kuwa kale.

Isku day
πŸ“

Soo Saaraha CSS clamp()

Samee qiime CSS clamp() dabacsan oo loogu talagalay far-qoraalka jawaab-celinta iyo booska. Dej cabbirka ugu yar/ugu badan iyo xadka viewport-ka, arag hordhac tooska ah, oo nuqul CSS-ka hal sadarka ah.

Isku day
🟦

Sameeyaha CSS Grid

Naqshadee grid CSS ah si muuqaal ah β€” tracks, halbeegyo iyo gaps β€” kadibna koobi CSS-ka iyo HTML-ka la abuuray.

Isku day

Su'aalaha Inta Badan La Iska Weydiiyo