Õppige, kuidas kasutada CSS-i segaühikuid reageeriva ja paindliku veebidisaini loomiseks. See juhend uurib erinevaid mõõtühikuid ja pakub praktilisi näiteid ülemaailmsetele veebiarendajatele.
CSS-i segaühikud: erinevate mõõtühikute kombineerimise kunsti valdamine
Veebiarenduse maailmas on esmatähtis luua paigutusi, mis kohanduvad sujuvalt erinevate seadmete ja ekraanisuurustega. Üks peamisi vahendeid selle reageerivuse saavutamiseks on CSS-i segaühikute tõhus kasutamine. See juhend süveneb CSS-is saadaolevatesse erinevatesse mõõtühikutesse ja selgitab, kuidas neid kombineerida, et luua paindlikke ja kohandatavaid veebidisaine, mis sobivad ülemaailmsele publikule.
CSS-i mõõtühikute mõistmine
CSS pakub rikkalikku valikut mõõtühikuid, millest igaühel on oma omadused ja kasutusjuhud. Nende ühikute mõistmine on oluline teadlike disainiotsuste tegemiseks. Uurime peamisi kategooriaid:
Absoluutsed pikkusühikud
Absoluutsed pikkusühikud on fikseeritud ja jäävad samaks sõltumata ekraani suurusest või kasutaja seadetest. Neid ei soovitata üldiselt reageeriva disaini jaoks, kuna need ei skaleeru hästi. Siiski võivad need olla kasulikud teatud elementide puhul, kus on soovitud kindel suurus.
- px (pikslid): Kõige levinum absoluutne ühik. Esindab ühte pikslit ekraanil.
- pt (punktid): Pärandühik, mida kasutatakse sageli trükidisainis. 1 pt on võrdne 1/72 tolliga.
- pc (piikad): Veel üks trükiga seotud ühik. 1 pc on võrdne 12 punktiga.
- in (tollid): Standardne pikkusühik.
- cm (sentimeetrid): Meetriline pikkusühik.
- mm (millimeetrid): Väiksem meetriline pikkusühik.
Näide:
.element {
width: 300px;
height: 100px;
}
Selles näites on element alati 300 pikslit lai ja 100 pikslit kõrge, olenemata ekraani suurusest.
Suhtelised pikkusühikud
Suhtelised ühikud on defineeritud teise suuruse omaduse suhtes. Siin tulebki esile reageerivus. Need ühikud skaleeruvad konteksti põhjal, muutes teie disainid kohandatavamaks.
- em: Suhteline elemendi enda fondi suurusega. Kui elemendi fondi suurus on 16 px, siis 1 em on võrdne 16 px-ga.
- rem (juurem): Suhteline juurelemendi (tavaliselt `<html>` sildi) fondi suurusega. See annab ühtlase aluse skaleerimiseks kogu lehel.
- %: Suhteline vanem-elemendi suurusega. Näiteks 50% laius tähendab, et element võtab poole oma vanema laiusest.
- ch: Suhteline "0" (null) märgi laiusega elemendi fondis. Kasutatakse peamiselt tekstipõhiste laiuste määramiseks.
- vw (vaateakna laius): Suhteline vaateakna laiusega. 1 vw on 1% vaateakna laiusest.
- vh (vaateakna kõrgus): Suhteline vaateakna kõrgusega. 1 vh on 1% vaateakna kõrgusest.
- vmin (vaateakna miinimum): Suhteline vaateakna laiusest ja kõrgusest väiksemaga.
- vmax (vaateakna maksimum): Suhteline vaateakna laiusest ja kõrgusest suuremaga.
Näited:
/* em kasutamine */
.element {
font-size: 16px; /* Põhifondi suurus */
width: 10em; /* Laius on 10 korda fondi suurus (160 px) */
}
/* rem kasutamine */
html {
font-size: 16px; /* Juurfondi suurus */
}
.element {
width: 10rem; /* Laius on 10 korda juurfondi suurus (160 px) */
}
/* % kasutamine */
.parent {
width: 500px;
}
.child {
width: 50%; /* Laps-element võtab 50% vanema laiusest (250 px) */
}
Ühikute kombineerimine reageerivate disainide jaoks
CSS-i tõeline jõud peitub erinevate ühikute kombineerimises optimaalse reageerivuse saavutamiseks. Siin on mõned strateegiad:
1. em või rem kasutamine fondi suuruste ja vahede jaoks
See on põhitehnika skaleeritava teksti ja ühtlaste vahede loomiseks. `em` või `rem` kasutamine võimaldab teil hõlpsalt kohandada oma disaini üldist skaalat, muutes ühte baasväärtust (juurfondi suurust või elemendi fondi suurust). See on eriti kasulik erinevate fondi suuruse eelistustega kasutajate arvestamiseks või teie disaini juurdepääsetavamaks muutmiseks.
Näide:
html {
font-size: 16px; /* Vaikimisi põhifondi suurus */
}
p {
font-size: 1rem; /* Lõigu fondi suurus (16 px) */
margin-bottom: 1rem; /* Alumine veeris (16 px) */
}
@media (max-width: 768px) {
html {
font-size: 14px; /* Vähenda põhifondi suurust väiksemate ekraanide jaoks */
}
}
Selles näites on fondi suurus ja veerised suhtelised juurfondi suurusega. Juurfondi suuruse muutmine meediapäringus skaleerib teksti ja vahed automaatselt väiksematel ekraanidel.
2. Protsentide kasutamine laiuste ja kõrguste jaoks
Protsendid on suurepärased voolavate paigutuste loomiseks, kus elemendid kohanduvad olemasoleva ruumiga. Need on eriti kasulikud ruudustikusüsteemide ehitamiseks ja elementide proportsioonide säilitamiseks vaateakna muutudes.
Näide:
.container {
width: 80%; /* Konteiner võtab 80% vanema laiusest */
margin: 0 auto; /* Keskjonda konteiner */
}
.column {
width: 50%; /* Iga veerg võtab 50% konteineri laiusest */
float: left; /* Lihtne kaheveeruline paigutus */
}
See kood loob kaheveerulise paigutuse, kus veerud muudavad suurust proportsionaalselt `container`-iga.
3. Protsentide kombineerimine min-width/max-width'iga
Et vältida elementide liiga kitsaks või laiaks muutumist, kombineerige protsente `min-width` ja `max-width` atribuutidega. See lähenemine aitab säilitada loetavust ja visuaalset atraktiivsust laiemas ekraanisuuruste valikus. See on juurdepääsetavuse seisukohalt kriitiline; näiteks tagades, et tekst ei muutuks kunagi nii kitsaks, et seda on raske lugeda.
Näide:
.element {
width: 80%;
max-width: 1200px; /* Takistab elemendi laiemaks minemist kui 1200 px */
min-width: 320px; /* Takistab elemendi kitsamaks minemist kui 320 px */
margin: 0 auto;
}
4. Vaateakna ühikute kasutamine dünaamiliseks suuruse määramiseks
Vaateakna ühikud (`vw`, `vh`, `vmin` ja `vmax`) on uskumatult kasulikud elementide loomiseks, mis skaleeruvad suhtes vaateakna mõõtmetega. Need on eriti tõhusad täisekraani elementide, tüpograafia ja reageerivate piltide puhul.
Näide:
.hero {
width: 100vw; /* Kogu vaateakna laius */
height: 80vh; /* 80% vaateakna kõrgusest */
}
h1 {
font-size: 5vw; /* Fondi suurus skaleerub vaateakna laiusega */
}
5. Segaühikud veeriste ja polsterduse jaoks
`px` kombineerimine suhteliste ühikutega veeriste ja polsterduse jaoks võib anda peenema kontrolli vahede üle, säilitades samal ajal reageerivuse. Näiteks võite kasutada fikseeritud suurusega polsterdust koos protsendipõhise veerisega.
Näide:
.element {
padding: 10px 5%; /* 10 px üleval/all, 5% vasakul/paremal vanema laiusest */
margin-bottom: 1rem;
}
Parimad praktikad ja kaalutlused
Siin on mõned parimad praktikad, mida CSS-i segaühikutega töötades meeles pidada:
- Eelistage `rem` `em`-ile, kus see on võimalik: `rem` ühikud pakuvad ühtlast alust kogu disaini skaleerimiseks. `em` ühikud on kasulikud, kuid neid võib olla raskem hallata, kui need on sügavalt pesastatud.
- Kasutage meediapäringuid läbimõeldult: Meediapäringud on olulised teie disaini kohandamiseks erinevate ekraanisuurustega. Nende liigne kasutamine võib aga viia keeruka ja raskesti hooldatava koodini. Püüdke lähtuda mobiil-eelisega lähenemisest ja kasutage meediapäringuid konkreetsete murdepunktide käsitlemiseks.
- Testige erinevatel seadmetel ja brauserites: Testige oma disaine alati erinevatel seadmetel, brauserites ja operatsioonisüsteemides, et tagada ühtlane renderdamine. Juurdepääsetavuse testimine on samuti oluline, et tagada teie disaini kasutatavus kõigi jaoks.
- Arvestage sisu pikkusega: Protsente kasutades olge teadlik sisu pikkusest. Pikki tekstiplokke võib olla vaja piirata `max-width` atribuudiga, et säilitada loetavus.
- Planeerige oma paigutus: Enne CSS-i kirjutamist planeerige oma paigutus ja see, kuidas elemendid reageerivad erinevatele ekraanisuurustele. See aitab teil otsustada, milliseid mõõtühikuid on kõige parem kasutada.
- Hoidke ühtset disainisüsteemi: Määratlege ühtne vahede ja suuruste väärtuste komplekt (nt kasutades disainisüsteemi, kus on piiratud hulk rem-väärtusi veeriste ja polsterduse jaoks), et tagada oma veebisaidil ühtne välimus ja tunnetus. See on eriti oluline suurte meeskondade või keerukate projektide puhul.
Näited ja rahvusvahelised rakendused
Vaatame mõningaid reaalseid näiteid selle kohta, kuidas segaühikuid kasutatakse erinevates kontekstides üle maailma. Need näited on loodud laialdaselt rakendatavaks ja väldivad spetsiifilist kultuurilist kallutatust.
Näide 1: Reageeriv artikli kaart
Kujutage ette veebisaiti, mis sisaldab uudisteartikleid. Soovime, et iga artikli kaart näeks hea välja nii mobiilseadmetes kui ka lauaarvutites.
.article-card {
width: 90%; /* Võtab 90% vanema laiusest */
margin: 1rem auto; /* 1rem üleval/all, auto vasakul/paremal tsentreerimiseks */
padding: 1.5rem; /* Lisab sisu ümber polsterduse */
border: 1px solid #ccc; /* Lihtne ääris visuaalseks eraldamiseks */
}
.article-card img {
width: 100%; /* Pilt võtab 100% kaardi laiusest */
height: auto; /* Säilita kuvasuhe */
}
@media (min-width: 768px) {
.article-card {
width: 70%; /* Suurem kaart töölaual */
}
}
Selles näites on kaardi laius protsentides, mis võimaldab sellel kohanduda ekraani suurusega. Veerised ja polsterdus kasutavad skaleerimiseks `rem` ühikuid, tagades ühtluse. Ka pilt skaleerub reageerivalt.
Näide 2: Navigatsioonimenüü
Navigatsioonimenüü ehitamine, mis kohandub erinevate ekraanisuurustega, on rahvusvahelises veebidisainis tavaline ülesanne. See näide kasutab suhteliste ja absoluutsete ühikute kombinatsiooni.
.navbar {
background-color: #333;
padding: 1rem 0; /* Kasuta polsterduseks rem ühikuid */
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.navbar li {
display: inline-block; /* Kuva lingid horisontaalselt */
margin: 0 1rem; /* Kasuta vahedeks rem-i */
}
.navbar a {
color: white;
text-decoration: none;
font-size: 1rem; /* Kasuta fondi suuruseks rem-i */
padding: 0.5rem 1rem; /* Kasuta teksti ümber oleva polsterduse jaoks rem-i */
}
@media (max-width: 768px) {
.navbar ul {
text-align: left; /* Vasakjoonda väiksematel ekraanidel */
}
.navbar li {
display: block; /* Aseta lingid väiksematel ekraanidel vertikaalselt */
margin: 0.5rem 0; /* Lisa linkide vahele ruumi */
}
}
`rem` ühikud loovad skaleeritava ja ühtlase menüü. Meediapäring muudab menüü väiksematel ekraanidel vertikaalseks loendiks.
Näide 3: Paindlik ruudustiku paigutus
Ruudustikud on paljude veebisaitide paigutuste selgroog. See näide näitab põhilist ruudustikku, kasutades protsente.
.grid-container {
display: flex; /* Lubab flexboxi ruudustiku paigutuse jaoks */
flex-wrap: wrap; /* Lubab elementidel järgmisele reale murduda */
padding: 1rem;
}
.grid-item {
width: calc(50% - 2rem); /* Iga element võtab 50% konteineri laiusest - 2rem (vahede jaoks) */
margin: 1rem; /* Lisa elementide vahele veerist ruumi tekitamiseks */
padding: 1rem;
border: 1px solid #eee;
box-sizing: border-box; /* Tagab, et polsterdus on laiuse arvutamisel kaasatud */
}
@media (max-width: 768px) {
.grid-item {
width: calc(100% - 2rem); /* Täislaius väiksematel ekraanidel */
}
}
See kood loob reageeriva ruudustiku. Väiksematel ekraanidel asetuvad elemendid vertikaalselt, võttes 100% saadaolevast laiusest.
Täpsemad tehnikad ja kaalutlused
`calc()` kasutamine dünaamilisteks arvutusteks
`calc()` funktsioon võimaldab teil teha arvutusi oma CSS-is. See on uskumatult võimas keerukate paigutuste jaoks. Saate kombineerida erinevaid ühikuid `calc()`-i sees.
Näide:
.element {
width: calc(100% - 20px); /* Laius on 100% vanemast, miinus 20 pikslit */
}
.element-2 {
margin-left: calc(10px + 1em);
}
See annab teile rohkem paindlikkust elementide suuruse määramisel teiste tegurite põhjal.
Vaateakna ühikud ja dünaamiline tüpograafia
Vaateakna ühikud võivad luua tõeliselt dünaamilise tüpograafia, mis kohandub ekraani suurusega.
Näide:
h1 {
font-size: 8vw; /* Fondi suurus skaleerub vaateakna laiusega */
}
p {
font-size: 2.5vw; /* Põhitekst kohandub ekraani suurusega */
}
See tagab, et teie pealkirjad ja tekst jäävad loetavaks sõltumata seadmest.
Juurdepääsetavuse kaalutlused
Segaühikutega töötades arvestage alati juurdepääsetavusega. Veenduge, et teie disainid on juurdepääsetavad puuetega kasutajatele. See hõlmab:
- Piisav värvikontrastsus: Tagage piisav kontrast teksti ja taustavärvide vahel.
- Õige pealkirjastruktuur: Kasutage sisu struktureerimiseks õigesti pealkirjasildid (h1-h6).
- Alternatiivtekst piltidele: Pakkuge kõigile piltidele kirjeldavat alt-teksti.
- Klaviatuuriga navigeerimine: Veenduge, et teie veebisait on klaviatuuriga navigeeritav.
- Testimine ekraanilugejatega: Testige oma veebisaiti ekraanilugejatega, et tagada ühilduvus.
- Fondi suuruse kohandused: Arvestage, et kasutajad võivad oma brauserites muuta vaikimisi fondi suurust. Teie disain peaks nende muudatustega sujuvalt kohanema, mida `rem` ühikud aitavad saavutada.
Jõudluse optimeerimine
Jõudluse optimeerimine on hea kasutajakogemuse jaoks ülioluline, eriti mobiilseadmetes. Mõned olulised jõudluskaalutlused:
- Minimeerige keerukate arvutuste kasutamist: `calc()` liigne kasutamine võib jõudlust mõjutada. Kasutage seda läbimõeldult.
- Vältige meediapäringute liigset kasutamist: Liiga palju meediapäringuid võib suurendada CSS-faili mahtu.
- Optimeerige pilte: Kasutage sobiva suurusega ja tihendatud pilte laadimisaegade vähendamiseks.
- Piltide laisklaadimine: Kaaluge piltide laisklaadimist, eriti nende, mis asuvad ekraani nähtavast osast allpool, et parandada lehe esialgset laadimisaega.
Kokkuvõte
CSS-i segaühikute valdamine on põhioskus igale veebiarendajale, kes soovib luua reageerivaid ja kohandatavaid disaine. Mõistes erinevaid ühikutüüpe ja nende tõhusat kombineerimist, saate luua veebisaite, mis näevad head välja ja toimivad sujuvalt laias valikus seadmetes ja ekraanisuurustes, arvestades ülemaailmse publiku erinevaid vajadusi ja eelistusi. Pidage meeles, et esmatähtis on juurdepääsetavus, põhjalik testimine ja oma lähenemisviisi pidev täiustamine, et saavutada parim võimalik kasutajakogemus. Selles juhendis käsitletud tehnikad on olulised kaasaegse ja kasutajasõbraliku veebikohalolu loomiseks, olenemata asukohast või kultuuritaustast.