Rem vienetai (rem) į Coliai (in) Ekrano vienetų keitiklis

Ekrano vienetų konverteriai apskaičiuoja santykius tarp pikselių (ekrano skiriamosios gebos vienetų), taškų (1/72 colio), fizinių matmenų (coliai, centimetrai) ir nuo tankio nepriklausomų vienetų, atsižvelgiant į ekrano DPI (taškų colyje). Jie atsižvelgia į ekrano skiriamąją gebą, pikselių tankį ir mastelio keitimo koeficientus, kad būtų užtikrintas tikslus dydžio atvaizdavimas skirtinguose įrenginiuose ir ekranuose.

Ekrano vienetų keitiklis palaiko pikselius (px), taškus (pt), colius (in), centimetrus (cm), milimetrus (mm), ems, rems, nuo tankio nepriklausomus pikselius (dp/dip) ir procentinius vienetus. Jis atlieka konvertavimą atsižvelgiant į ekrano skiriamąją gebą, DPI ir įrenginio pikselių santykį, kad būtų galima tiksliai projektuoti įvairiuose įrenginiuose.

Tikslus ekrano vienetų konvertavimas užtikrina, kad dizainai būtų tinkamai rodomi skirtinguose įrenginiuose, ekrano rezoliucijose ir pikselių tankio ekranuose (standartiniuose, "Retina", 4K ekranuose). Taip išlaikomas vizualinis nuoseklumas, išvengiama maketų laužymo, užtikrinamas tinkamas dydis ir suteikiama galimybė kurti reaguojantį dizainą, kuris sklandžiai veikia nuo išmaniųjų telefonų iki didelių stacionariųjų kompiuterių monitorių.

Taip, ekrano vienetų keitiklis tinka didelės raiškos (DPI) ekranams, įskaitant "Retina" (2x pikselių tankis), 4K/5K monitorius ir didelės raiškos mobiliųjų įrenginių ekranus. Jis atsižvelgia į įrenginio pikselių santykį, todėl projektai išlaiko numatytus fizinius dydžius, nepriklausomai nuo ekrano pikselių tankio ar skiriamosios gebos.

Pikseliai yra ekrano skiriamosios gebos vienetai (kintamo fizinio dydžio, priklausomai nuo DPI). Taškai yra fiksuoti fiziniai vienetai (1/72 colio). Standartiniuose 72 DPI ekranuose 1 taškas = 1 pikselis. Retina ekranuose (144 DPI) 1 taškas = 2 taškai. Taškai užtikrina nuoseklų fizinį dydį įvairiuose ekranuose.

DPI (taškai colyje) nustato, kiek pikselių telpa fiziniame colyje. Didesnis DPI sukuria mažesnius pikselius. Standartiniuose ekranuose naudojami 72-96 DPI, "Retina" - 144-220 DPI, 4K - 200+ DPI. Norint tiksliai nustatyti dydį, reikia žinoti DPI, kad būtų galima perskaičiuoti pikselius į fizinius vienetus.

"Android" kūrime naudojami nuo tankio nepriklausomi pikseliai (dp arba dip) išlieka tokio paties fizinio dydžio skirtingo tankio ekranuose. Nepriklausomai nuo ekrano DPI, 1 dp visada yra lygus maždaug 1/160 colio. Tai leidžia nustatyti nuoseklų dydį skirtinguose įrenginiuose be rankinio DPI skaičiavimo.

Naudokite santykinius vienetus (ems, rems, procentus) reaguojančiam dizainui, apibrėžkite lūžio taškus skirtingiems įrenginiams, testuokite įvairias rezoliucijas, naudokite rodinio vienetus viso ekrano elementams ir konvertuokite vienetus, kad dizainą tinkamai pritaikytumėte nuo 320 px mobiliųjų ekranų iki 2560 px+ darbalaukio monitorių.

Fiziniai pikseliai yra tikrieji ekrano pikseliai. Loginiai pikseliai (CSS pikseliai, taškai) - tai abstraktūs vienetai, kurių mastelis priklauso nuo įrenginio pikselių santykio. "Retina" ekranuose 1 loginis pikselis = 4 fiziniai pikseliai (2x2 tinklelis). Tai leidžia dizaineriams dirbti su nuosekliais matmenimis, kartu palaikant didelio DPI ekranus.

Rem vienetai yra santykiniai su šakninio šrifto dydžiu (paprastai 16px naršyklės numatytasis dydis). 1rem = 16px, 2rem = 32px. Konvertuokite daugindami rem reikšmę iš pagrindinio šrifto dydžio. Rems leidžia kurti prieinamus, keičiamo dydžio dizainus, kuriuose atsižvelgiama į naudotojo pasirinktą šrifto dydį ir išlaikomas proporcingas išdėstymas.

Taip, konvertuokite tarp ekrano vienetų (pikselių) ir spausdinimo vienetų (taškų, colių). Spausdinimui paprastai naudojama 300 DPI, o ekranams - 72-220 DPI. 1 colio dizaino elementas yra 72 ekrano taškai, bet 300 spausdinimo taškų. Supraskite šiuos perskaičiavimus, kai dizainą pritaikysite skirtingoms terpėms.

Rodinio plotis (vw) ir rodinio aukštis (vh) yra procentinė ekrano matmenų dalis: 100vw = visas plotis, 50vh = pusė aukščio. Jie reaguoja, automatiškai prisitaiko prie ekrano dydžio. Norėdami suprasti absoliučius dydžius konkrečiose ekrano raiškose, konvertuokite rodinio vienetais ir pikseliais.

Mobilieji (320-428 px pločio), planšetiniai kompiuteriai (768-1024 px), nešiojamieji kompiuteriai (1366-1920 px), staliniai kompiuteriai (1920-2560 px+). Kurkite vaizdus 2 kartus didesnio dydžio, nei numatyta rodyti "Retina" ekranuose. Konvertuokite tarp vienetų, kad nustatytumėte optimalius vaizdo matmenis, užtikrinančius ryškų rodymą be per didelio failo dydžio.

Jutikliniams taikiniams naudokite mažiausiai 44x44 CSS pikselius (iOS standartas) arba 48x48 dp (Android), kad būtų patogu bakstelėti. Perskaičiuokite juos į fizinius colius (maždaug 7-9 mm), kad patikrintumėte patogumą. Nuoseklus dydžio nustatymas pagerina UX ir prieinamumą skirtingo dydžio ir raiškos ekranuose.