Home-theater-designers
Jūs apgūsit dažas CSS vienības teksta fonta lieluma pielāgošanai, veidojot tīmekļa lapas. Ir daudz vienību, piemēram, pt, pc, ex utt., taču vairumā gadījumu jums vajadzētu koncentrēties uz trim populārākajām vienībām: px, em un rem. Daudzi izstrādātāji parasti nesaprot, kādas ir atšķirības starp šīm vienībām; tāpēc tālāk ir sniegts detalizēts šo vienību skaidrojums.
DIENAS VIDEO MAKEUSEOF
Pirms turpināt, ņemiet vērā, ka ir divu veidu vienības garumi: absolūts un radinieks .
Absolūtie garumi
Absolūtā garuma mērvienības ir fiksētas, un garums, kas izteikts jebkurā no tām, tiks parādīts kā tieši šis izmērs.
Absolūtā garuma mērvienības nav ieteicamas lietošanai uz ekrāna, jo ekrāna izmēri ir ļoti atšķirīgi. Tomēr tos var izmantot, ja ir zināms izvades datu nesējs, piemēram, drukātam izkārtojumam.
| Vienība | Apraksts |
|---|---|
| cm | centimetri |
| mm | milimetri |
| iekšā | collas (1 colla = 96 pikseļi = 2,54 cm) |
| px* | pikseļi (1 pikselis = 1/96 daļa no 1 collas) |
| pt | punkti (1 pt = 1/72 no 1 collas) |
| pc | lāpstas (1 gab = 12pt) |
Relatīvie garumi
Relatīvā garuma vienības norāda garumu attiecībā pret citu garuma rekvizītu. Relatīvā garuma vienības labāk mērogojas dažādās renderēšanas vidēs.
| Vienība | Attiecībā pret | |
|---|---|---|
| iekšā* | Attiecīgi pret elementa fonta lielumu (2em nozīmē 2 reizes lielāku par pašreizējo fontu) | |
| piem | Attiecīgi pret pašreizējā fonta x augstumu (reti izmantots) | |
| ch | Attiecīgi pret '0' (nulles) platumu | |
| rem* | Saistībā ar saknes elementa fonta lielumu | |
| vw | Relatīvi pret 1% no skatvietas platuma* | |
| vh | Relatīvi pret 1% no skata loga augstuma* | |
| min | Relatīvi 1% no skatvietas* mazākā izmēra | |
| vmax | Salīdzinot ar 1% no skatvietas* lielākās dimensijas | |
| % | Saistībā ar vecāku elementu |
1. pikseļi (pikseļi)
Pixel, iespējams, ir visvairāk izmantotā vienība CSS, un tā ir ļoti populāra, ja runa ir par teksta fonta lieluma iestatīšanu tīmekļa lapās. Viens pikselis (1 pikselis) ir definēts kā 1/96 collas drukas materiālā.
kā pārbaudīt ļaunprātīgu programmatūru iPhone
Tomēr datoru ekrānos tie parasti nav saistīti ar faktiskajiem mērījumiem, piemēram, centimetriem un collām, kā jūs varētu domāt; tie ir tikai definēti kā mazi, bet redzami. Tas, kas tiek uzskatīts par redzamu, ir atkarīgs no ierīces.
Dažādu ierīču ekrānos ir atšķirīgs pikseļu skaits collā, ko sauc par pikseļu blīvumu. Ja izmantotu fizisko pikseļu skaitu ierīces ekrānā, lai noteiktu šīs ierīces satura lielumu, jums varētu rasties problēma, lai visu izmēru ekrānos izskatītos vienādi.
Šeit tiek izmantota ierīces pikseļu attiecība. Būtībā tas ir tikai veids, kā aprēķināt, cik daudz vietas ierīces ekrānā aizņems CSS pikseļi (1 pikseļi), kas ļaus tai izskatīties tāda paša izmēra salīdzinājumā ar citu ierīci.
Zemāk ir piemērs: -
<div class="container">
<div>
<h1>This is a paragraph</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
omnis at! Officiis praesentium officia, nemo veniam consequatur
nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
amet possimus iure impedit assumenda distinctio aliquid debitis, autem
vel ullam aut, quod corporis ratione atque ducimus dolorum.
</p>
</div>
</div>
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container div {
max-width: 500px;
padding: 5px 20px;
border: 1px grey solid;
border-radius: 10px;
}
p {
font-size: 16px;
}izvade
Kā pārbaudīt klēpjdatora temperatūru
Augšējā lodziņā ir redzams, kā tas izskatās, kad tas tiek rādīts lielākā ekrānā, piemēram, klēpjdatorā, un apakšējā lodziņā kad tas tiek rādīts mazākā ekrānā, piemēram, tālrunī .
Ņemiet vērā, kā teksts abos lodziņos ir vienāda izmēra. Pamatā pikseļi darbojas. Tas palīdz tīmekļa saturam (ne tikai tekstam) visās ierīcēs izskatīties vienāda izmēra.
2. Es (M)
em vienība savu nosaukumu ieguvusi no lielā burta “M” (em), jo lielākā daļa CSS vienību nāk no tipogrāfijas. Par pamatu tas izmanto vecākelementa pašreizējo fonta lielumu. To var izmantot, lai palielinātu vai samazinātu elementa fonta lielumu, pamatojoties uz fonta lielumu, kas mantots no vecāka.
Pieņemsim, ka jums ir vecākais div, kura fonta lielums ir 16 pikseļi. Ja izveidojat rindkopas elementu šajā div un piešķirat tam fonta lielumu 1 em, rindkopas fonta lielums būs 16 pikseļi.
Tomēr, ja piešķirat citai rindkopai fonta lielumu 2em, kas nozīmē 32 pikseļus. Apsveriet tālāk sniegto piemēru:
<div class="div-one">
<p class="one-em">1 em based on 10px</p>
<p class="two-em">2 em based on 10px</p>
</div>
<div class="div-two">
<p class="one-em">1 em based on 10px</p>
<p class="two-em">2 em based on 10px</p>
</div>
</div>
.div-one {
font-size: 15px;
}
.div-two {
font-size: 20px;
}
.one-em {
font-size: 1em;
}
.two-em {
font-size: 2em;
}izvade
Varat redzēt, kā em var palielināt teksta lielumu un kā to ietekmē pašreizējais fonta lielums, kas mantots no vecākkonteinera. Nav ieteicams tos izmantot, jo īpaši sarežģītās strukturētās lapās.
Ja tos neizmanto pareizi, var rasties mērogošanas problēmas, kuru dēļ elementi var nebūt pareizi izmērīti, pamatojoties uz sarežģītu izmēru pārmantošanu DOM kokā.
3. Rem (Root Em)
Rem darbojas gandrīz tāpat kā em, taču galvenā atšķirība ir tā, ka rem atsaucas tikai uz lapas saknes elementa fonta lielumu, nevis uz vecākfonta lielumu. Saknes fonta lielums ir noklusējuma fonta lielums, ko norādījis lietotājs pārlūkprogrammas iestatījumos vai jūs, izstrādātājs.
kā pārvietot programmas no HDD uz SSD
Tīmekļa pārlūkprogrammas noklusējuma fonta lielums parasti ir 16 pikseļi, tāpēc 1 rem būs 16 pikseļi un 2 rem — 32 pikseļi. Tomēr gadījumā, ja saknes fonta lielums tiek mainīts, piemēram, uz 10 pikseļiem; 1 rem būs 10 pikseļi un 2 rem būs 20 pikseļi.
Šeit ir piemērs, lai lietas būtu skaidrākas:
<div class="div-one">
<!-- EM -->
<p class="one-em">1 em based on container (40px)</p>
<p class="two-em">2 em based on container (40px)</p>
<!-- REM -->
<p class="one-rem">1 rem based on root (16px)</p>
<p class="two-rem">2 rem based on root (16px)</p>
</div>
.div-one {
font-size: 40px;
}
.one-em {
font-size: 1em;
}
.two-em {
font-size: 2em;
}
.one-rem {
font-size: 1rem;
}
.two-rem {
font-size: 2rem;
}
izvade
Kā redzat, rindkopas, kas definētas ar REM vienībām, pilnībā neietekmē mūsu konteinerā norādītais fonta lielums, un tās ir stingri atveidotas attiecībā pret saknes fonta lielums, kas definēts HTML elementu atlasītājā.
Px vs. Em pret Rem: kura vienība ir labākā?
Em nav ieteicams, jo var būt sarežģīta ligzdotu elementu hierarhija. REM parasti tiek atbilstoši mērogots ar jauno noklusējuma/pamata fonta lielumu, kas norādīts pārlūkprogrammas iestatījumos, nevis PX. Tas izskaidro, kāpēc jums vajadzētu izmantot REM, strādājot ar teksta saturu savās tīmekļa lapās. REM uzvar sacīkstēs. Labāka satura veidošana un mērogošana, izmantojot REM, piešķir jūsu vietnei eleganci, jo tā ir ideāli piemērota vietņu veidotājiem. Vietas satura mērījumi noteiks jūsu vietnes izskatu un darbību, tomēr jums būs jākļūst radošam.