Mikä on reagoiva web-suunnittelu

• Saattaa 19, 2024

Reagoivalla web-suunnittelulla on kolme pääpiirteenä, jotka ovat juoksevat asettelut, muutettavissa olevat kuvat ja mediakyselyt. Mediakyselyt eivät oikeastaan ​​ole niin uusia web-suunnittelussa. CSS2.1: n alusta lähtien mediatyyppinä voimme suunnitella tyylitaulukoita sekä webille että tulostettavalle, varmistaen jonkin verran, että verkkosivu näyttää samalta näytöltä ja tulostettaessa. Tämä eteni mediakyselyiksi CSS3: ssa. Tämä kysely tarkistaa medialaitteen leveyden (enimmäislaitteen leveys) ja testaa sitä asetettuun arvoon, kuten 480px tai 768px. Vastauksena tähän kyselyyn käytämme CSS-tyylejä vaihtaaksesi nesteasettelun ja muuttamaan näytön kuvien kokoa.

Voit helposti testata, onko verkkosivustolla reagoiva suunnittelu. Aloita selaimella tietokoneen näytön koko leveydellä. Vedä sitten selaimen oikeaa reunaa vasemmalle vähentääksesi selainikkunan leveyttä. Kuvien pitäisi olla pienempiä ja asettelu vie vierekkäin olevat kelluvat jakot ja pinoa ne pystysuunnassa. Esimerkiksi, jos meillä on kuusi kuvaa (kuusi jakoa) riviä galleriasivulla koko näytössä, kun pienennämme näytön leveyttä, rivillä olevien kuvien lukumäärää vähennetään asteittain ja pinotaan tarpeen mukaan. Kun leveys on pienennetty tiettyyn määrään, itse kuvien koko muuttuu pienemmäksi. Jos tarkkaillaan tarkkaan, huomaat myös, että tietyt muotoiluelementit, kuten navigointilinkit, voidaan pienentää kuvakeksi tai jopa kadota. Tätä hallitsee myös CSS-tyylitaulukko.

Suunnitellessasi verkkosivustoja ota huomioon sen lisäksi, kuinka verkkosivun suunnitteluelementit näyttävät koko näytön leveydeltä, mutta myös sen, miltä ne näyttävät pinottuina. Mieti, mitkä sisustuselementit voidaan poistaa näytöltä pienemmällä näytön leveydellä vähentämättä verkkosivuston toimivuutta. Koska reagoivan suunnittelun ominaisuudet ja tekniikka muuttuvat nopeasti, kaikkien lisälaitteiden kanssa pysyminen voi olla aikaa vievää. Jos haluat mieluummin viettää aikaa suunnittelussa kuin koodauksessa, tutustu joihinkin Wordpressin käytettävissä oleviin kauniisiin reagoiviin teemoihin. Jos olet pieni suunnitteluyritys, sinun kannattaa ehkä harkita aloittamista yhdestä näistä reagoivista teemaasetteluista verkkosivuja suunnitellessasi.

Video-Ohjeita: The first secret of great design | Tony Fadell (Saattaa 2024).