Teen nettisivut Notepadilla ja käytän paljon css:ssä position: absolute -menetelmää eri elementtien sijoituksessa. Nyt huomasin, että sivut näkyvät vanhalla koneella katsottuna yllisuurilta eli joutuu scrollaamaan sekä sivuttais- että pystysuunnassa. Mitä css-koodiin täytyisi laittaa, että sivut skaalautuvat joka näytölle sopiviksi?
Sivujen skaalautuvuus
Tuulia_Tee
31090
0Äänestä
Muut lukivat myös
Odottaa vastausta
Näihin keskusteluihin ei ole vielä vastattu. Ole ensimmäinen.
Vastaukset 3
Vanhimmat
1. Valitse mittayksiköksi "em". Unohda pikselimitat. Silloin kaikki säätyy fonttikoon mukaan kuten käyttäjä on halunnut. 1em on suunnilleen m-kirjaimen leveys. Poikkeustilanteissa käytetään myös prosentteja.
2. Älä vaihda leipätekstin fontin kokoa. Suhteuta otsikot yms. leipätekstiin.
3. Sivut toimii paremmin mitä kapeammaksi ne pystyy taipumaan. Huomioi tämä heti sivuston suunnittelun alussa, että pyrit välttämään ylimääräisiä palstoja yms. Pyri siis tekemään mahdollisimman kapeita sivuja, älä ruudulle sopivia, koska näyttölaitteissa on eroja.
4. Suunnittele sivusto niin, että kaikki sopii vielä korkeintaan 52em leveyteen jos ei ole pystyscrolleja. Jos tavaraa on sivulla enemmän niin suunnittele niin, että 50em leveyden pitää vielä toimia. Sen mukaan mitoitat kokoja ettet tee liian isoa.
5. Kuten varmaan keksit niin width: ?em; ja height: ?em; on ne mitä käytät paljon, sekä määrittet objekteja kellumaan (float) niin taitto muotoutuu automaattisesti niiden osalta. Tämän lisäksi sitten on min-width: ?em; max-width: ?em; Leipätekstille määrität aina max-width: 50em; ettei veny liian leveäksi.
Näistä on jo paljon apua!
Jos nimenomaan haluat tehdä eri näytöille ja resolutioille skaalautuvan sivun, käytä taulukoiden, solujen, div:ien ymv. leveyden määrittämiseen prosentteja, ei px:ä eikä em:ä.