Prilagajanje internetne strani glede na širino ekrana
Prihodnost kaže, da bo različnih resolucij ekranov vedno več, prav tako bodo večje skrajne meje. Na eni strani mobilnih telefonov s približno 400px po širini pa do ogromnih ekranov z več ko 3000px. To predstavlja veliko težavo pri oblikovanju in prilagajanju internetnih strani za tako široko paleta resolucij. Z uporabo @media screen ukaza bomo lahko s preprostim ukazom naložili ustrezno prilagojen dizajn internetne strani. Kako? Beri dalje.
W3c konzorcij v specifikaciji CSS3 opisuje možnost uporabe ukaza media queries. S pravilno strukturo HTML elementov bomo lahko v prihodnosti, ko bo levji delež brskalnikov razumel CSS3 ukaze in ko končno ljudje ne bodo več uporabljali zastareli IE6, s preprostim ukazom definirali velikost širino strani glede na velikost ekrana s ukazom:
@media screen and (min-width: 400px) and (max-width: 700px) { ... }
Recimo da bomo za primer širine ekrana med 400 in 700px (internetna stran prilagojena za mobilne telefone) odstranili desni stolpec, ali pa ga premaknili na dno strani:
@media screen and (min-width: 400px) and (max-width: 700px)
{ #desni_stolpec { position: absolute; bottom: 0 } }
Če pa bo obiskovalec imel resolucijo večjo kot recimo 1200px pa je smiselno, da povečamo conteiner ali okostje strani iz recimo običajnih 960px na 1800px in temu primerno povečamo preglednost celotne internetne strani.
@media screen and (min-width: 1200px)
{ #conteiner { width: 1800px } }
Možnost imamo tudi ločenih CSS dokumentov, ki jih vključimo z ukazom @import, kot danes večina uporablja prilagojene CSS dokumente za IE6. Tako bomo lahko za določene sklope resolucij prilagodili bazno velikost fonta, margine, velikost layouta, glavni css pa bomo nato z relativnimi enotami (%, em, …) naslonili na bazne velikosti.
V prihodnosti bomo pripravili delovno verzijo takega CSS dokumenta, ki pa bo, razumljivo, uporaben le pri novejših brskalnikih, ki razumejo CSS3. Prav tako bomo razglabljali kako za ta način prilagoditi grafiko in kako oblikovati ozadja ter ostale grafične elemente, da bodo sledili različnim velikostim ekranom in tako omogočali izdelavo prilagojenih internetnih strani za različne naprave.
Če imate drugače pogled ali pa drugačno idejo uporabe lepo vabljeni h komentarjem.
Podobni članki:
- Internetne strani in trgovine za novi iPhone
- Prednosti po meri oblikovane internetne strani ali internetne trgovine
- Internetne strani v 3D
- Izdelava internetne strani za mobilne telefone? Smiselno?
- Izdelava osnutkov internetne strani na iPad-u
- IE6 težave pri izdelavi spletnih strani
- Wordpress – brisanje starih verzij vsebine oz člankov internetne strani oz bloga
- Vpis nove internetne (spletne) strani
- cPanel – dodajanje apache mod_geoip modula – omejitev glede na državo obiskovalca
- Kako internetni strani dodati nestandardne fonte-pisave brez uporabe CSS3
