Muutama vuosi sitten sivustojen suunnittelu ja rakentaminen oli suhteellisen helppoa. Verkkosivustot olivat yksinkertaisempia, ja niitä tarkasteltiin pöytätietokoneissa ja kannettavissa tietokoneissa, joissa on vain vähän vaihtelua näytön koosta. Nykyään mobiililaitteilla, jotka käyttävät katsojien selausaikaa, verkkosivustoa voi tarkastella 4,8 tuuman älypuhelimen näytöllä, 5 "phabletilla, 7 tuuman tabletin tai minkä tahansa koon.
Miten varmistat, että sivustosi näkyy oikein laitteiden tyypin ja näytön koon mukaan?
Ratkaisua ehdotti ensin Ethan Marcotte, kun hän selvitti tapoja tehdä verkkosivustosovelluksia herkästi, eli ne muuttuivat näytön koon mukaan. Vastuullinen verkkosivuston suunnittelu on sellainen, joka tekee CSS: n älykkäästä käytöstä sen varmistamiseksi, että web-sivut toimivat hyvin monenlaisten näytön koon mukaan - ilman URL-uudelleenohjausta tai dynaamisesti palvelemalla erilaisia HTML- ja CSS-koodeja UserAgentin mukaan. Se ei ole mikään tekniikka eikä standardi, vaan se on joukko suunnitteluperiaatteita, jotka auttavat saavuttamaan tuloksen.
Viime vuosina monet joustavat mallipohjat, CSS-kehykset ja WordPress-teemat ovat alkaneet. Esimerkiksi WordPressissa voidaan luoda reagoiva verkkosivusto kirjoittamatta yhtä riviä koodia.
Mutta todellinen web-suunnittelija ei ole tyytyväinen vain mallien käyttämiseen. Hän pyrkii ymmärtämään reagoivan web-suunnittelun elementtejä, jotta he voivat käyttää niitä tehokkaasti.
Joten tänään, aiomme tarkastella kolmea perustavaa tekniikkaa, jotka sinun on hallittava, olet tehokas reagoiva suunnittelija.
Median kyselyissä voit suunnitella erilaisia asetteluja eri mediatyypeille, kuten näyttö, tulostus, televisio, kämmentietokoneet jne. Mediatyypistä riippuen voit määrittää sivun tyylin, fontin ja muut elementit.
Media-kyselyissä CSS3: ssa otettiin käyttöön suunnittelija, joka mukauttaa sisällön esittämistä tietyn tuotevalikoiman mukaan. Ne koostuvat mediatyyppisestä ilmoituksesta ja yhdestä tai useammasta mediaominaisuuksista, jotka arvioivat todeksi tai vääriksi.
Mediatyyppejä ovat kämmentietokone, näyttö, tv, tulostus ja projektio. Mediaominaisuuksiin kuuluvat, mutta eivät rajoitu, laitteen korkeus, leveys, kuvasuhde, resoluutio, värin indeksi sekä korkeus ja selaimen ikkunan leveys.
Otetaanpohjainen esimerkki; kuvittele, että tekstin koko pienenee pienemmillä laitteilla, kuten puhelimilla. Kysely, joka näyttäisi olevan jotain:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Kappaleiden fonttikoko on nyt asetettu 1em, ellei selaimen leveys alle 400px, jolloin se kutistuu 0.8em: ksi.
Kokemukseni mukaan paras tapa suunnitella reagoivaan ulkoasuun on ensin luoda oletusmallin tyyliarkki, jolla on tärkeimmät rakenneelementit. Tällöin voit lisätä mediakyselyihin ulkoasun tai muiden laitteen elementtien mukaisten elementtien muokkaamisen. Jos se on enemmän kuin kourallinen sääntöjä, saattaa olla parempi siirtää ne erilliselle lapsilevylle - jonka voit valita myöhemmin myöhemmin. Näin toimisi:
Tämä koodi tarkistaa, onko laite kädessä pidettävä maisema-tilassa, jonka leveys on alle 720px ja jos on, se lataa tablet_layout.css- tyylitaulukon.
Huomaa, että ominaisuuksien leveys, korkeus, min / max-leveys, min / max-korkeus viittaavat selainikkunan leveyteen ja korkeuteen. Laitteen leveyttä ja korkeutta hallitsee laitteen leveys, laitteen korkeus, min / max-laitteen leveys, min / max-laitteen korkeus . Jos haluat etsiä lisää esimerkkejä mediakyselyistä MDN: llä on hyvä pyöristys.
"Nestemäinen verkko" on termi, jota käytetään kuvaamaan ulkoasua, joka on koodattu eri elementtien suhteellisissa suhteissa pikemminkin kuin kiinteillä pikseliarvoilla.
Perinteiset CSS-mallinnukset käyttävät kiinteän leveyden verkkoja elementtien sijoittamiseen. Kiinteän leveän lähestymistavan toiminta ei ole enää nyt, kun laitteiden näytöt ovat 3 tuumaa muutaman jalkaan. Nestekaasusuunnittelussa kaikki on koodattu sen suhteellisen osuuden suhteen peruselementtiin, sen sijaan että määritettäisiin kunkin elementin korkeus ja leveys; se saa prosenttiosuuden tai suhteellisen koon.
Kuvittele, että sinulla on neljä saraketta. Tämän nesteen tekemiseksi sen sijaan, että määritettäisiin kukin 200 pikselin leveä, sinun on määritettävä ne 0,2083% (esim. 200/960). Ainakin tämä on periaate. Täysin nestemäisen verkon luominen vaatii paljon hoitoa. Se on yksi niistä harvoista tapauksista, jotka suosittelisin mieluummin mukautettuja työkaluja. Pieni nestekerros , Muuttujärjestelmä ja Fluid Baseline Grid ovat erinomaisia vaihtoehtoja kirjoittamaan omia nesteiden verkkoasi tyhjästä.
Kuvat katsotaan joustaviksi, kun kuva tekee alkuperäisestä koosta, kunhan HTML-kontti tukee sitä, mutta kun selainikkuna kutistuu, kuva skaalautuu sen mukaan.
Vaikka muualla oleva rakenne on nestemäinen ja reagoiva, se ei tule toimimaan hyvin, jos kaikki komponentit eivät skaalaudu. Tämä voi saada hankalia kuvia ja videoita. 700 pikselin leveä kuva näyttää hyvältä työpöydältä, mutta silputtuu, kun sitä katsellaan 320 pikselin tablet-laitteella. Useimmat nykyaikaiset herkät mallit käyttävät CSS: n max-width- ominaisuutta kuvan mittakaavassa. (Tämä menetelmä oli Richard Butler ehdotti ensin .)
img {max-width: 100%;}Nämä harvat viivat varmistavat, että kuvaa ei saada katkaistuksi asettamalla maksimaalinen kuvan leveys 100 prosenttiin astiasta. Jos selainikkuna tai -näyttö tulee pienemmiksi, tämä CSS-koodin pala kutistuu kuvasta suhteellisesti. Korkeutta säätyy automaattisesti pitämällä kuvasuhde lukittuna.
Voit sen sijaan lukita kuvan tiettyyn pystysuuntaiseen näyttöosuuteen
img {max-height: 75%;}(Varmista, ettet käytä molempia korkeuskorkeuksia ja maks. Leveitä ominaisuuksia yhdessä.)
Kuvan kokoa voidaan myös linkittää tekstikokoon em- elementin sijaan em: iin , kuten:
img {width: 30em;}Jos kuvassa on tekstiä, voit halutessasi rajoittaa minimi- / maksimikokoa sen varmistamiseksi, että teksti on luettavissa. Voit määrittää sen seuraavasti:
img {width: 30em;max-width: 500px;min-width: 100px;}Samaa tekniikkaa voidaan käyttää myös videoiden mittaamiseen, esimerkiksi:
.video embed, .video object, .video iframe { width: 100%; height: auto; }Vastuullinen muotoilu on alan tulevaisuus, mutta niin monta erilaista tekniikkaa lentäen, on usein vaikea pysyä. Mestata nämä 3 yksinkertaista tekniikkaa, ja olet 90% tapaa olla reagoiva suunnittelija.
Esitetty kuva / pikkukuva, elastinen kuva kautta Shutterstock.