Prilagodite web-lokaciju Fit All Resolutions

Prilikom izrade web-lokacije jedna od najvažnijih stvari koju treba imati na umu jest osigurati da se stranica ispravno prikazuje na zaslonima i uređajima svih veličina. To se može učiniti umetanjem retka koda u svoju stranicu koji definira relativnu širinu stranice ili pružanjem minimalnih i maksimalnih razlučivosti.

Ovaj brzi članak dat će vam savjete o tome kako osigurati da se vaša web-lokacija prikazuje ispravno na zaslonima svih veličina .

Prilagodite svoju web-lokaciju Fit All Screens

Definiranje relativne širine stranice preporučuje se kada je riječ o dizajnu web-stranice zbog mogućnosti stranice da se prilagodi zaslonima bilo koje veličine. Definiranjem širine u postocima, za razliku od broja jedinice, gradite određenu količinu fleksibilnosti za svaki dio stranice, dopuštajući mu da raste ili se skupi na temelju specifikacija ekrana gledatelja.

Definiranje relativne širine web-lokacije vrši se putem oznaka tijela . Ova se oznaka može prilagoditi ako upotrebljavate tijelo div # :

 Tijelo {širina: 100%;} 

U ovom primjeru kôd diktira da će stranica vaše web-lokacije zauzeti 100% prozora, bez obzira na veličinu ekrana za gledanje. Ako želite da se stranica prikaže nešto manja, preporučujemo da postavite širinu ne manju od 80% ili riskirate da se vaš sadržaj prikaže premalom na zaslonu. Ako odredite manju širinu, možete fokusirati zaslon pomoću margine: auto .

Minimalna ili maksimalna širina svojstva

Svojstvo minimalne ili maksimalne širine može se koristiti i za prilagodbu web-lokacije kako bi odgovarala svim vrstama rezolucije. Međutim, važno je imati na umu da minimalna širina nije podržana u programu Internet Explorer i da postavljanje maksimalne širine može rezultirati iskrivljenom prezentacijom ako se na manjoj stranici ne nalazi veći zaslon.

Evo primjera web-lokacije širine stranice 90%, centrirano, s minimalnom širinom od 600 piksela i maksimalnom širinom od 2000 piksela:

 Tijelo {širina: 90%; margin: auto-min širine: 600px, max širine: 2000 piksela}