Velikost pisave CSS lahko prilagodite na več načinov. Velik delež izvajalcev še vedno uporablja piksle, vendar to ni pravi pristop. Piksel je zelo preprosta možnost, ki ni vedno primerna za prilagajanje postavitev strani. Upoštevajte vse obstoječe metode za spreminjanje velikosti pisave CSS.
Kakšna je ta "velikost pisave" na splošno?
Domneva se, da se velikost nanaša na vrednost največjega znaka določene pisave. To ni res. Pravzaprav je vrednost vgrajena v pisavo in za ročno merjenje z ravnilom je malo verjetno, da se bo iztekla. Značilno je, da je velikost nekoliko večja od razdalje od zgornjega dela velike črke do spodnjega dela najmanjšega. To se naredi, da se omogoči katera koli kombinacija znakov, da se prilega v dani prostor. Pomembno je tudi, da navedete parameter "line-height", sicer lahko črke p, q in podobno presegajo meje.
Pixels
Najpogostejša različica. Namesti: velikost pisave: 16px; Prednost pikslov je samo ena stvar - brez težav z velikostjo. Nič ne šteje. Kakšna je velikost, bodo znaki na zaslonu. Pomanjkljivost je težava s prilagodljivo velikostjo pisave CSS. Razmerja med različnimi velikostmi ne bo mogoče vzpostaviti. Med »slikovnimi pikami« je mogoče pripisati zastarele merske enote. Ti vključujejo pc, cm, mm in pt. Da, mm je milimeter, cm je centimeter. Pt in pc - tipografska točka in tipografski vrh. Zakaj so te metode zastarele? Ker niso bili "neodvisni" - brskalnikSamodejno prešteje vrednosti v slikovnih pikah. Zato so bile težave enake kot pri px. Mimogrede, v enem cm z vidika brskalnika vsebuje 38px.
Vrednost Em: je odvisna od velikosti pisave nadrejenega elementa
Vse je preprosto. Recimo, da imate div, za katerega je določena velikost pisave 16px. V njej je še en div, za katerega je velikost pisave CSS nastavljena na 2em. V skladu s tem bo 1em - 16px (to je velikost pisave nadrejenega elementa) in 2em - dvakrat, to je 32px.
Vrednost em lahko nastavite tudi v nadrejenem elementu. V tem primeru bo odvisna od osnovne velikosti v telesu ali html. Em je relativna velikost pisave CSS, ki se bo povečala in zmanjšala skupaj z velikostjo znakov starševskega elementa. To je priročno - za spremembo velikosti na veliko mestih, morate le spremeniti parametre staršev.
Za strokovnjake: ex in ch
Praktično ne uporabljajo navadni izvajalci in frontend-razvijalci. Ex je vrednost znaka "X", ch pa je znak "0". Izbrane pisave morda nimajo takih znakov, vendar se lahko možnosti še vedno uporabljajo. Gotovo ni znano, za katere primere so takšne dimenzije najprimernejše. Poskusite eksperimentirati - morda vam bo bolje? Ne pozabite, da sta ex in ch »pogojne« enote, zato bo fino prilagajanje parametrov težko.
Odstotek: najbolj neoprijemljiva možnost
Kako določiti velikost pisave v CSS kot odstotek? Zdi se, da je vse preprosto - določiti morate samo želeno možnost in po njej simbol "%". Ampak tukaj jepride do pomembnega vprašanja: "Kolikšen odstotek velikosti bo dodeljen?"
V večini primerov se parameter izračuna glede na velikost staršev, vendar ne vedno. Če nastavite lastnost margin left, se odstotek izračuna glede na širino nadrejenega bloka. Če nastavite višino vrstice, se odstotek upošteva glede na trenutno velikost pisave. Nastavitev parametrov v odstotkih zahteva skrbne poskuse. Bodite previdni pri tej enoti, ker lahko preprosto spremenite videz vaše postavitve.
Rem: Enostavna in univerzalna enota
Zgoraj je seznam številnih načinov za prilagoditev velikosti pisave v CSS, vendar nobena od njih ni primerna. Za poenostavitev dela je bil izračunan parameter rem, ki se izračuna glede na velikost oznake, določene za html. To je lažje, kot se zdi na prvi pogled. Na primer, za oznako html, ki je zavila celotno vsebino strani, jo nastavite v velikosti pisave CSS 16px. V skladu s tem bo 1rem zdaj 16px. 2rem je 32px in tako naprej.Lahko uporabite katero koli razmerje stranic: 02 rem, 11 rem, 100rem Brskalnik bo natančno našel parametre.
V html-u se ničesar ne morete dotakniti, ker brskalniki sami določajo določeno velikost pisave za ovoj. Toda za natančnejšo nastavitev je najbolje, da ponovno določimo rezultat. Glavna prednost rem je, da lahko zlahka merite pisave na določeno lokacijo, ne da bi vplivali na druge elemente. Ne pozabite, da starejši brskalniki IE pod različico 9 ne podpirajo te meritve.
Vw in vh: eksotični parametri
Najnovejše enotemeritve za mobilne naprave. Vw je 1% širine okna, na katerem si uporabnik ogleda vaše spletno mesto. Vh - 1% višine. Vrednosti znakov bodo samodejno prilagojene glede na zaslon obiskovalca. Če želite izbrati ustrezno velikost pri postavitvi, povečajte in pomanjšajte velikost zaslona.
Poglejmo
Dolgo časa ni bilo mogoče določiti velikosti pisav CSS samo skozi px. To je veliko bolj priročno za uporabo rem, vh in vw (še posebej za prilagodljivo oblikovanje), kot tudi em. Vsaka od teh možnosti ima svoje prednosti in slabosti, zato preverite več metod pred uporabo. Sodobni vodiči se pogosto zatekajo k rem, ker je to eden od najlažjih načinov za spreminjanje velikosti pisave. Vendar pa ima pomanjkljivost - komponente postanejo manj modularne.
Priporočljivo je, da se upoštevajo 2 pravila:
če naj bi se lastnosti prilagodile glede na velikost pisave, bo em izbrana prednost;
V drugih primerih je priporočljivo uporabiti rem.
Em se pogosto uporablja za nastavitev velikosti oblazinjenja in robov. Bodite previdni, če podate vrednost znakov za sezname, ker so lahko znaki popačeni zaradi velikega vstavljanja.
