Säädä verkkosivustosi sopivaksi kaikkiin ratkaisuihin

Kun suunnittelet verkkosivustoa, yksi tärkeimmistä asioista, jotka on pidettävä mielessä, on varmistaa, että sivusi näkyy oikein eri kokoisissa näytöissä ja laitteissa. Tämä voidaan tehdä asettamalla sivulle rivi koodia, joka määrittää sivun suhteellisen leveyden tai antamalla vähimmäis- ja maksimiarvot.

Tämä nopea artikkeli antaa sinulle vinkkejä siitä, miten sivustosi näkyy oikein kaikenkokoisissa näytöissä .

Säädä sivustosi sopivaksi kaikkiin näyttöihin

Sivun suhteellisen leveyden määrittäminen on suositeltu menetelmä, kun se tulee verkkosivujen suunnitteluun, koska sivun kyky mukautua minkä tahansa kokoisiin näyttöihin. Määrittämällä leveys prosentteina yksikkömäärää vasten, voit rakentaa tietyn määrän joustavuutta jokaiselle sivulle, jolloin se voi kasvaa tai kutistua katsojan näytön ominaisuuksien perusteella.

Verkkosivuston suhteellisen leveyden määrittely tapahtuu kehotunnisteilla . Tätä tunnistetta voidaan mukauttaa, jos käytät div # -laitetta :

 body {leveys: 100%;} 

Tässä esimerkissä koodi määrää, että sivustosi sivu vie 100% ikkunasta katselunäytön koosta riippumatta. Jos haluat, että sivu näyttää hieman pienemmältä, suosittelemme leveyden asettamista vähintään 80 prosenttiin tai riskiä, ​​että sisältö näkyy liian pienenä näytössä. Jos määrität pienemmän leveyden, voit tarkentaa näytön marginaalilla: auto .

Vähimmäis- tai enimmäisleveysominaisuus

Vähimmäis- tai enimmäisleveysominaisuutta voidaan käyttää myös verkkosivuston säätämisessä, jotta se sopii kaikenlaisiin resoluutioihin. On kuitenkin tärkeää huomata, että Internet Explorer ei tue vähimmäisleveyttä, ja että maksimileveyden asettaminen voi johtaa vääristettyyn esitykseen, jos pienempi sivu ei sovi suurempaan näyttöön.

Seuraavassa on esimerkki verkkosivustosta, jonka sivuleveys on 90%, keskitetty ja jonka leveys on vähintään 600 pikseliä ja enimmäisleveys 2000 pikseliä:

 body {leveys: 90%; margin: auto, min-leveys: 600 kuvapistettä, max-leveys: 2000px}