Veebilehtede kujundamine ebaõnnestub tihti elementide mõõtmete õige määratlemise tõttu. Siin on oluline kasutada õigeid CSS omadusi laiuse ja kõrguse jaoks. Selles juhendis saad teada, kuidas omadusi width (laius) ja height (kõrgus) tõhusalt määratleda. Oluline on kasutada nii staatilisi kui ka protsentuaalseid näitajaid ja mõista responsiivse disaini eeliseid.
Olulisemad tähelepanekud
- Omadused width ja height määravad HTML-elementide mõõtmed.
- Sa saad määrata fikseeritud piksliväärtusi või protsentuaalseid väärtusi, et oma paigutust kohandada.
- Protsentuaalsed näitajad aitavad luua responsiivseid disainilahendusi, mis näevad erinevatel ekraanisuurustel head välja.
Samm-sammuline juhend
Elementide laiuse ja kõrguse määramiseks alusta põhikomplektist CSS omadustest.
Samm 1: Määratle fikseeritud laius ja kõrgus
Sa saad kasutada fikseeritud laiust ja kõrgust elemendi jaoks, et tagada, et see näeb välja just nii, nagu soovid. Lihtne meetod selle saavutamiseks on kasutada CSS-i pikslitega.
Tulemus on ruudukujuline element, mille mõõtmed on 500 x 500 pikslit, mis jääb alati samaks. Sa saad väärtusi soovi korral kohandada, et luua ristkülikukujulisi või muid vorme. Oluline on, et arvestaksid oma määratud paigutuse mõõtmetega.
Samm 2: Kasuta protsentuaalset laiust ja kõrgust
Responsiivsete disainide abil saavutad paindlikkuse. Fikseeritud piksliväärtuste asemel saad kasutada protsentuaalseid näitajaid. Näiteks kui määratled width: 85%;, võtaks element 85% saadavast laiusest. Sellega tagad, et sinu paigutus kohaneb erinevate ekraanisuurustega.
Testi seda, vähendades akna suurust. Sa näed, kuidas element kasvab või kahaneb koos brauseriakna laiusega. See takistab vajadust kasutada kerimisriba, mis tekib siis, kui fikseeritud laius ei mahu vaatesse.
Samm 3: Määra kõrgus protsentides
Samamoodi nagu laiuse puhul, saad ka kõrguse protsentides määrata. Kui kasutad height: 100%;, võtab element oma konteineri täispikkuse.
Vaata, kuidas element kohandub konteineri laiusega ja kerimisriba kaob, kui ruumi on piisavalt. Kui kasutad height: 85%;, skaleeritakse element vastavalt ülemise elemendi kõrgusele ja jääb kohandatavaks.
Samm 4: Loo dünaamiline paigutus
Õige arusaam ja omaduste rakendamine laiuse ja kõrguse määratlemiseks on olulised sammud sinu arengus. Fikseeritud ja protsentuaalsete väärtuste segamine aitab sul luua dünaamilise paigutuse, mis vastab erinevatele nõudmistele. See teadmine on aluseks keerukamatele teemadele, nagu responsiivne disain, millega saad süvitsi minna hilisemates tundides.
Kokkuvõte – Laiuse ja kõrguse alused HTML-is ja CSS-is
Et muuta oma veebilehed atraktiivseks ja kasutajasõbralikuks, on oluline elementide mõõtmete nutikas määratlemine. Fikseeritud piksliväärtustega saad luua stabiilseid paigutusi, samas kui protsentuaalsed näitajad annavad sulle vabaduse luua responsiivseid disainilahendusi, mis kohanduvad erinevate ekraanisuurustega. Nende meetodite kombinatsioon võimaldab sul luua dünaamilisi ja köitvaid veebilehti.
Korduma kippuvad küsimused
Kuidas määrata elemendi jaoks fikseeritud kõrgus?Määra height CSS-is fikseeritud väärtuseks pikslites.
Mis juhtub, kui määran laiuse protsentides?Element skaleeritakse vastavalt ülemise elemendi laiusele.
Miks peaksin kasutama responsiivseid disainilahendusi?Responsiivne disain tagab, et sinu veebileht näeb erinevates seadmetes hea välja.
Kuidas mõjutavad piksliväärtused nutitelefonide paigutust?Fikseeritud piksliväärtused võivad põhjustada, et sisu jääb ekraanist välja.
Kas ma saan kombineerida nii fikseeritud kui ka protsentuaalse kõrguse?Jah, mõlema väärtuse kombineerimine aitab sul luua paindlikumaid ja atraktiivsemaid paigutusi.
