Kohandage oma veebisaiti kõigi lahenduste sobitamiseks

Veebisaidi kavandamisel on üks tähtsamaid asju, mida meeles pidada, tagada, et teie leht kuvatakse õigesti kogu ekraani ja igas suuruses seadmete vahel. Seda saab teha, sisestades oma lehele koodi rea, mis määratleb lehe suhtelise laiuse või minimaalse ja maksimaalse eraldusvõime.

See kiire artikkel annab teile näpunäiteid selle kohta, kuidas tagada, et teie veebileht kuvatakse igas suuruses ekraanil korralikult .

Kohandage oma veebisaiti kõigi ekraanide sobitamiseks

Lehe suhtelise laiuse määratlemine on veebilehe kujundamisel soovitatav meetod, kuna lehe võime kohanduda mis tahes suurusega ekraanidele. Määratledes laiuse protsendi, mitte üksuse numbri, loote iga lehekülje jaoks teatud paindlikkuse, võimaldades tal kasvada või kahaneda vaataja ekraanipiltide põhjal.

Veebisaidi suhtelise laiuse määratlemine toimub keha märgendite abil . Seda sildi saab kohandada, kui kasutate div # keha :

 keha {laius: 100%;} 

Selles näites määrab kood, et teie veebisaidi leht võtab 100% aknast, olenemata vaatekuva suurusest. Kui soovite, et teie leht ilmuks veidi väiksemaks, soovitame seada oma laiuse vähemalt 80% -le või riskida, et teie sisu kuvatakse ekraanil liiga väikeseks. Kui defineerite väiksema laiuse, saate ekraani fokuseerida marginaali abil: auto .

Minimaalne või maksimaalne laius

Minimaalset või maksimaalset laiust saab kasutada ka veebilehe korrigeerimisel, et see sobiks igat liiki eraldusvõimega. Oluline on siiski märkida, et Internet Explorer ei toeta minimaalset laiust ning maksimaalse laiuse seadmine võib põhjustada moonutatud esitlust, kui väiksem leht ei sobi suurema ekraaniga.

Siin on näide veebisaidist, mille lehekülje laius on 90%, keskel, minimaalse laiusega 600 pikslit ja maksimaalse laiusega 2000 pikslit:

 keha {laius: 90%; marginaal: automaatne; min-laius: 600 px; max-width: 2000px}