Luo sujuvia asetteluja HTML5: n ja CSS3: n avulla

Kun aloitin verkkosivujen tekemisen 1990-luvun lopulla, ulkoasurakenteet perustuivat taulukkoon. Useimmiten näytön kiinteistöjen jakaminen tehtiin prosenttiosuuksilla. Esimerkiksi vasemman selaussarakkeen osuus voi olla 20 prosenttia, kun taas pääsisältöalue on 80 prosenttia. Selaimen näkymäikkunoissa ei ollut suuria eroja, joita näemme tänään, joten nämä asettelut skaalautuivat hyvin rajoitetulle näkymäikkunoiden alueelle.

Kukaan ei välittänyt siitä, että lauseet näyttivät hieman erilaisilta yhdellä näytöllä verrattuna toiseen. Kuitenkin, kun CSS-pohjaiset mallit ottivat haltuunsa, se antoi verkkopohjaisille malleille mahdollisuuden jäljitellä tarkemmin tulostusta. Siirtymän myötä monille (mukaan lukien minä) suhteelliset perustelut vähenivät vuosien ajan niiden jäykkien, pikselipohjaisten kollegoidensa hyväksi.

Mutta kuten kaikki asiat, suhteelliset mallit ovat palanneet. Mini, pitkät hiukset (toivon!) Ja levenevät farkut ovat kaikki palanneet vuosien varrella. Nyt on aika tehdä suhteellinen asettelu uudelleen.



  • Ohjelmisto: Tekstieditori, selain
  • Projektin aika: 1-2 tuntia
  • Taidot : Opi, miksi suhteelliset asettelut ovat tarpeen reagoivaan suunnitteluun, muunna pikselipohjaiset elementtileveydet suhteellisiksi prosenttiosuuksiksi, muunna pikselipohjaiset typografiakoot niiden em-pohjaisiin ekvivalentteihin, ymmärrä miten löytää konteksti mille tahansa elementille
  • Tukitiedosto

01. Kiinteät asettelut eivät ole tulevaisuuden kestäviä

Kuten mainitsin, 'taulukon asettelu' -päivistä lähtien minulla on ollut vähän puhetta käyttää suhteellisia asetteluja. Minua on yleensä pyydetty koodaamaan HTML ja CSS, jotka sopivat parhaiten suunnitteluyhdistelmään, jonka koko on melkein aina 950-1000 pikseliä. Jos ulkoasu olisi koskaan rakennettu suhteellisella leveydellä (esimerkiksi 90 prosenttia), valitukset olisivat saapuneet nopeasti: 'Se näyttää erilaiselta näytölläni'. Kiinteät, pikselipohjaiset mitat sisältävät verkkosivut olivat helpoin tapa sovittaa komposiitin kiinteät pikselipohjaiset mitat.

miten ruohoa tehdään epätodellisessa moottorissa 4

Jopa viime aikoina, kun käytetään mediahakuja tietyn suositun laitteen, kuten iPadin tai iPhonen, mukautetun version asetteluun, mitat voivat silti olla pikselipohjaisia, koska näkymä oli tiedossa. Vaikka kehittäjät saattavat nauttia mahdollisuudesta ladata asiakas uudelleen aina, kun he tarvitsevat nykypäivän uusinta gizmoa varten muokattua sivustoa, se ei ole aivan tulevaisuuden varma tapa rakentaa verkkosivuja. Kun yhä monipuolisempia näkymiä otetaan käyttöön, tarvitsemme jonkinlaisen tavan varata tuntematon.

02. Miksi suhteelliset asettelut ovat välttämättömiä reagoiville malleille

Vaikka mediakyselyt ovat voimakkaita, tiedämme nyt joitain rajoituksia. Mikä tahansa kiinteän leveyden muotoilu, joka käyttää vain mediakyselyjä mukautuakseen eri näkymiin, vain 'napsahtaa' yhdestä CSS-mediakyselysääntöjoukosta seuraavaan ilman lineaarista etenemistä näiden kahden välillä.

Sen sijaan haluamme luoda muotoilun, joka joustaa ja näyttää hyvältä kaikissa näkymissä, ei vain tietyissä, jotka on määritelty mediakyselyssä. Otan etenemisen: meidän on vaihdettava kiinteät, pikselipohjaiset asetteluemme sujuviin, suhteellisiin. Tämän avulla elementit voivat skaalata suhteessa näkymään, kunnes yksi tai toinen mediakysely muuttaa muotoilua.

03. Suhteellinen asettelu ja mediakyselyt

Ethan Marcotte kirjoitti lopullinen artikkeli reagoivasta verkkosuunnittelusta A List Apartissa. Vaikka hänen käyttämänsä työkalut (sujuva asettelu ja kuvat sekä mediakyselyt) eivät olleet uusia, ideoiden soveltaminen ja toteuttaminen yhdeksi yhtenäiseksi metodologiaksi oli. Monille verkkosuunnittelussa työskenteleville artikkeli oli uusien mahdollisuuksien synty - uusia tapoja luoda molempien maailmojen parhaat puolet tarjoavia verkkosivuja: tapa saada sujuva ja joustava muotoilu, joka perustuu suhteelliseen ulkoasuun, samalla kun pystyi rajoittamaan, miten pitkät elementit voivat joustaa mediakyselyihin. Niiden yhdistäminen muodostaa reagoivan suunnittelun ytimen, mikä luo jotain todella suurempaa kuin sen osien summa.

04. Suunnittelun muuttaminen kiinteästä ja suhteellisesta ulkoasusta

Lähitulevaisuudessa kaikilla saamillasi tai luomillasi komposiittikomposiiteilla on todennäköisesti kiinteät mitat. Tällä hetkellä mitataan (pikseleinä) elementtien koot, marginaalit ja niin edelleen Photoshopin, Fireworksin jne. Grafiikkatiedostoissa. Lävistämme nämä mitat suoraan CSS: ään. Sama koskee tekstikokoja. Napsautamme tekstielementtiä valitsemassamme kuvankäsittelyohjelmassa, huomautamme fonttikoon ja syötämme sitten arvon (jälleen usein pikseleinä mitattuna) asiaankuuluvaan CSS-sääntöön. Joten miten muunnamme kiinteät mitat suhteellisiksi?

05. Muistettava kaava

On mahdollista, että olen tulossa liian paljon Ethan Marcotte -fanipoikana, mutta tässä vaiheessa on välttämätöntä, että annan hänelle toisen suuren hatun kärjen (sen pitäisi olla todennäköisesti jousi, ehkä jopa polvistua) hänelle. Dan Cederholmin erinomaisessa kirjassa Käsityönä valmistettu CSS , Herra Marcotte kirjoitti nesteverkkoja käsittelevän luvun. Siinä hän toimitti yksinkertaisen ja yhdenmukaisen kaavan kiinteän leveyden pikselien muuntamiseksi suhteellisiksi prosenttiosuuksiksi:

kohde ÷ konteksti = tulos

Hajuako se sinulle vähän kuin yhtälö? Älä pelkää, kun luot reagoivan mallin, tästä kaavasta tulee pian uusi paras ystäväsi. Sen sijaan, että puhuisimme enää teoriasta, laitetaan se toimimaan muuttamalla fiktiivisen elokuvan verkkosivuston kiinteän ulottuvuuden muotoilu Ja voittaja ei ole ... nesteprosenttiin perustuvaan asetteluun.

06. Nesteen asettelujen omaksuminen

Tällä hetkellä sivuston perusmerkintärakenne näyttää tältä:

here is the sidebar

here is the content

Here is the footer

Tärkeää on tässä huomata CSS, jota käytämme tällä hetkellä päärakenteiden (otsikko, navigointi, sivupalkki, sisältö ja alatunniste) leveyksien asettamiseen. Olen jättänyt pois monet muotoilusäännöt, jotta voimme keskittyä rakenteeseen:

mihin marmosetin työkalulaukkua käytetään
#wrapper { margin-right: auto; margin-left: auto; width: 960px; } #header { margin-right: 10px; margin-left: 10px; width: 940px; } #navigation { padding-bottom: 25px; margin-top: 26px; margin-left: -10px; padding-right: 10px; padding-left: 10px; width: 940px; } #navigation ul li { display: inline-block; } #content { margin-top: 58px; margin-right: 10px; float: right; width: 698px; } #sidebar { border-right-color: #e8e8e8; border-right-style: solid; border-right-width: 2px; margin-top: 58px; padding-right: 10px; margin-right: 10px; margin-left: 10px; float: left; width: 220px; } #footer { float: left; margin-top: 20px; margin-right: 10px; margin-left: 10px; clear: both; width: 940px; }

Kaikki arvot asetetaan tällä hetkellä pikseleillä. Työskentelemme uloimmasta elementistä ja vaihdamme ne suhteellisiin prosentteihin käyttämällä kohde ÷ konteksti = tulos kaava.

Kaikki sisältömme istuu tällä hetkellä div: ssä, jonka tunnus on #kääre . Yllä olevasta CSS: stä näet, että se on asetettu automaattisella marginaalilla ja 960 pikselin leveydellä. Kuinka me määritämme, kuinka suuri prosenttiosuus näkymäikkunan leveydestä on äärimmäisenä divina?

07. Kontekstin asettaminen suhteellisille elementeille

Tarvitsemme jotain, joka pitää sisällään ja josta tulee konteksti kaikille suhteellisille elementeille (sisältö, sivupalkki, alatunniste ja niin edelleen), jotka aiomme sisällyttää suunnitteluun. Siksi meidän on asetettava suhteellinen arvo leveydelle, joka #kääre tulisi olla suhteessa näkymän kokoon. Katsotaan nyt toistaiseksi tyhjä ja heitetään 96 prosentilla ja katsotaan, mitä tapahtuu. Tässä on muutettu sääntö #kääre :

#wrapper { margin-right: auto; margin-left: auto; width: 96%; /* Holding outermost DIV */ }

Ja näin se näyttää selainikkunassa:

Luo nestemäisiä asetteluja

Sivusto, jonka #wrapperin leveysasetus on 96%

Toistaiseksi niin hyvä! 96 prosenttia toimii tosiasiallisesti melko hyvin täällä, vaikka olisimme voineet valita 100 tai 90 prosenttia - mikä tahansa asettaisikin näkymän muotoilun esteettisimmällä tavalla.

Siirtyminen kiinteästä suhteelliseen muuttuu hieman monimutkaisemmaksi, kun siirrymme sisäänpäin. Tarkastellaan ensin otsikko-osiota. Harkitse kaavaa uudelleen: kohde ÷ konteksti = tulos . Meidän # header div (kohde) istuu #wrapper div (konteksti). Siksi otamme # header (kohde) 940 pikselin leveys, jaa se kontekstin ( #kääre ), joka oli 960 px ja tulos on .979166667. Voimme muuttaa tämän prosentteiksi siirtämällä desimaalin tarkkuudella kaksi numeroa oikealle, ja otsikon prosenttileveys on nyt 97,9166667. Lisätään se CSS: ään:

#header { margin-right: 10px; margin-left: 10px; width: 97.9166667%; /* 940 divided by 960 */ }

Ja koska molemmat #navigation ja #alatunniste divilla on myös sama ilmoitettu leveys, voimme vaihtaa molemmat pikseliarvot samaan prosenttipohjaiseen sääntöön.

Lopuksi, ennen kuin vilkaisemme selainta, katsotaanpa #sisältö ja #sidebar divs. Koska konteksti on edelleen sama (960 px), meidän on vain jaettava kohdekoko tällä luvulla. Meidän #sisältö on tällä hetkellä 698 px, joten jaa tämä arvo 960: lla ja vastaus on .727083333. Jos siirrät desimaalin tarkkuudella, tulos on 72,7083333 prosenttia - se on #content div prosentteina.

Sivupalkkimme on tällä hetkellä 220 pikseliä, mutta harkittava on myös 2 pikselin raja. En halua oikeanpuoleisen reunan paksuuden laajenevan tai supistuvan, joten se pysyy 2 kuvapisteessä. Tämän vuoksi minun on vähennettävä sen paksuus sivupalkin leveydestä ja suoritettava sitten sama laskenta. Jaa kohde (nyt 218 px) kontekstilla (960 px) ja vastaus on .227083333. Vaihda desimaalia ja sivupalkin tulos on 22,7083333 prosenttia.

Muutettuaan kaikki pikselileveydet prosentteiksi asiaankuuluva CSS näyttää tältä:

#wrapper { margin-right: auto; margin-left: auto; width: 96%; /* Holding outermost DIV */ } #header { margin-right: 10px; margin-left: 10px; width: 97.9166667%; /* 940 divided by 960 */ } #navigation { padding-bottom: 25px; margin-top: 26px; margin-left: -10px; padding-right: 10px; padding-left: 10px; width: 72.7083333%; /* 698 divided by 960 */ } #navigation ul li { display: inline-block; } #content { margin-top: 58px; margin-right: 10px; float: right; width: 72.7083333%; /* 698 divided by 960 */ } #sidebar { border-right-color: #e8e8e8; border-right-style: solid; border-right-width: 2px; margin-top: 58px; margin-right: 10px; margin-left: 10px; float: left; width: 22.7083333%; /* 218 divided by 960 */ } #footer { float: left; margin-top: 20px; margin-right: 10px; margin-left: 10px; clear: both; width: 97.9166667%; /* 940 divided by 960 */ }

Seuraava kuvakaappaus näyttää tuloksen Firefoxissa, jonka näkymä on noin 1000 pikseliä:

Luo nestemäisiä asetteluja

Kehittyvä nesteiden asettelu Firefoxissa

08. Emmekö voi vain pyöristää numeroita?

Otetaan jonkin verran aikaa ulkoasusta harkitaksemme desimaalitarkkuutta. Jotkut kriittiset reaktiiviset suunnittelutekniikat (esimerkiksi katso tämä James Pearcen artikkeli ) väittävät, että numeroiden, kuten .550724638 em, kirjoittaminen tyylitaulukoihin on hölynpölyä. Saatat ihmetellä itseäsi, miksi niitä ei yksinkertaisesti pyöristetä järkevämmiksi. Vastaväite on, että pyöristämättömät arvot ovat tarkempi vastaus esitettyyn kysymykseen. Jos selaimelle annetaan tarkin vastaus, sen pitäisi pystyä esittämään vastaus tarkimmalla tavalla.

samsung galaxy s7 walmart suora puhe

Tähän liittyvänä sivuna, jos pysyt hereillä yli parin matematiikkatunnin aikana, olet kuullut Kultainen leikkaus . Lähes jokaisessa tieteenalassa käytetty matemaattinen suhde ilmaistaan ​​noin 1: 1,61803398874989 (jos haluat sen 10000 desimaaliin, koputa itsesi tässä ). Ei mitenkään siisti numero, mutta melko tärkeä. Jos kultainen suhde voi kärsiä niin tarkoista mittauksista, olen taipuvainen uskomaan, että myös verkkomallimme voivat. Aivan, palaa sujuvaan ulkoasuun.

09. Muiden asetteluelementtien muuntaminen

Mennään nyt ja korvataan kaikki 10 pikselin ja marginaalin pikselit, joita käytetään koko suhteelliseen ekvivalenttiin kohde ÷ konteksti = tulos kaava. Koska kaikilla 10 pikselin leveydellä on sama 960 pikselin konteksti, leveys prosentteina on 1,0416667 prosenttia (10 ÷ 960).

Kaikki näyttää silti hyvältä samassa näkymän koossa. Navigointialue ei kuitenkaan toimi. Jos tuon näkymän koon vain vähän, linkit alkavat ulottua kahteen riviin:

Luo nestemäisiä asetteluja

Huomaa ongelma sivuston navigoinnissa?

Lisäksi, jos laajennan näkymääni, linkkien välinen marginaali ei kasva suhteellisesti. Katsotaanpa navigointiin liittyvää CSS: ää ja yritetään selvittää miksi:

#navigation { padding-bottom: 25px; margin-top: 26px; margin-left: -1.0416667%; /* 10 divided by 960 */ padding-right: 1.0416667%; /* 10 divided by 960 */ padding-left: 1.0416667%; /* 10 divided by 960 */ width: 97.9166667%; /* 940 divided by 960 */ background-repeat: repeat-x; background-image: url(../img/atwiNavBg.png); border-bottom-color: #bfbfbf; border-bottom-style: double; border-bottom-width: 4px; } #navigation ul li { display: inline-block; } #navigation ul li a { height: 42px; line-height: 42px; margin-right: 25px; text-decoration: none; text-transform: uppercase; font-family: Arial, 'Lucida Grande', Verdana, sans-serif; font-size: 27px; color: black; }

Kolmas sääntömme, #navigation ul li a , pikselipohjainen marginaali on edelleen 25 kuvapistettä. Mennään eteenpäin ja korjataan se luotettavan kaavan avulla. Kuten #navigation div perustuu 940 pikseliin, tuloksen tulisi olla 2,6595745 prosenttia. Joten muutamme koodia seuraavasti:

#navigation ul li a { height: 42px; line-height: 42px; margin-right: 2.6595745%; /* 25 divided by 940 */ text-decoration: none; text-transform: uppercase; font-family: Arial, 'Lucida Grande', Verdana, sans-serif; font-size: 27px; color: black; }

Se oli tarpeeksi helppoa! Tarkistetaan vain, että kaikki on kunnossa selaimessa ...

Luo nestemäisiä asetteluja

Linkkiasettelun muutoksen tulos: yhden ongelman korjaaminen on luonut toisen

Voi odota: se ei ole täsmälleen se, mihin me ampui. Okei, linkit eivät ulotu kahteen riviin, mutta meillä ei ole selkeää oikeaa suhteellista marginaalia. Navigointilinkit näyttävät yhdeltä isolta sanalta, eikä sitä löydy sanakirjastani ...

10. Muista aina asiayhteys

Kun otetaan huomioon kaava uudelleen ( kohde ÷ konteksti = tulos ), on mahdollista ymmärtää miksi tämä ongelma ilmenee. Meidän ongelmamme on asiayhteys. Tässä on merkinnät:

Kuten näette, meidän linkit istuvat

  • tunnisteet. Ne ovat suhteellisen marginaalin konteksti. Tarkastellaan CSS: ää
  • Tunnisteet, voimme nähdä, että leveysarvoja ei ole asetettu:

    #navigation ul li {display: inline-block; }

    Kuten usein tapahtuu, käy ilmi, että on olemassa useita tapoja ratkaista tämä ongelma. Voisimme lisätä nimenomaisen leveyden

  • tunnisteita, mutta niiden on oltava joko kiinteän leveyden pikseleitä tai prosenttiosuus sisältävästä elementistä (navigointi div ) - kumpikaan ei salli tekstissä joustavuutta, joka lopulta istuu niiden sisällä.

    Voisimme sen sijaan muuttaa CSS: ää

  • tunnisteet muuttuvat inline-block että linjassa :

    #navigation ul li { display: inline; }

    Valitsee näyttö: inline; (joka pysäyttää

  • lohkotason elementteinä käyttäytyvät elementit) tekee myös navigoinnista vaakasuuntaisen Internet Explorerin aiemmissa versioissa (versiot 6 ja 7), joissa on ongelmia inline-block . Olen kuitenkin fani inline-block koska se antaa paremman hallinnan marginaaleille ja pehmusteille nykyaikaisissa selaimissa, joten jätän sen sijaan
  • Tunnisteet kuten inline-lohkot (ja ehkä lisätä ohitustyylin IE 6: lle ja IE 7: lle myöhemmin) ja siirtää sen sijaan prosenttipohjaisen marginaalisäännön -tunniste (jolla ei ole nimenomaista asiayhteyttä) sisältävään
  • estää sen sijaan. Muutetut säännöt näyttävät nyt tältä:

    #navigation ul li { display: inline-block; margin-right: 2.6595745%; /* 25 divided by 940 */ } #navigation ul li a { height: 42px; line-height: 42px; text-decoration: none; text-transform: uppercase; font-family: Arial, 'Lucida Grande', Verdana, sans-serif; font-size: 27px; color: black; }

    Ja näin näyttää tulos selaimessa 1200 pikselin leveydellä:

    Luo nestemäisiä asetteluja

    Päivitetty asettelu katselukerrassa 1200 pikseliä: tämä on yksi navigointiongelma korjattu!

    Navigointi on tulossa sinne nyt, mutta minulla on edelleen ongelma navigointilinkeistä, jotka ulottuvat kahteen riviin, kun näkymäikkuna pienenee, ainakin kunnes pääsen alle 768 pikseliä, kun aiemmin kirjoittamamme mediakysely [kirjan 2. luvusta, josta tämä artikkeli on ote] ohittaa nykyiset navigointityylit. Ennen kuin aloitamme navigoinnin korjaamisen, vaihdan kaikki typografiakokoani kiinteäkokoisista pikseleistä suhteelliseen yksikköön, ems.

    11. Emojen käyttäminen pikselien sijasta typografiaan

    Menneinä vuosina web-suunnittelijat käyttivät emoja ensisijaisesti typografian koon muuttamiseen pikselien sijaan, koska Internet Explorerin aiemmat versiot eivät pystyneet zoomaamaan pikseleinä asetettua tekstiä. Nykyaikaiset selaimet ovat jo jonkin aikaa voineet zoomata tekstiä näytöllä, vaikka tekstin kokoarvot ilmoitettaisiin pikseleinä. Joten miksi ems on parempi käyttää pikseleitä?

    Tässä on kaksi ilmeistä syytä: Ensinnäkin kuka tahansa, joka edelleen käyttää Internet Explorer 6: ta (kyllä, nuo kaksi ihmistä), saa automaattisesti mahdollisuuden zoomaamaan tekstiä; ja toiseksi se tekee elämästä sinulle, suunnittelija / kehittäjä, paljon helpompaa.

    Em-koko määritetään suhteessa kontekstin kokoon. Jos asetamme kirjasinkokoksi 100 prosenttia merkitse ja tyylitä kaikki muut typografiat käyttämällä em-tiedostoja, alkuperäinen ilmoitus vaikuttaa niihin kaikkiin. Tämän takana on se, että jos asiakas on suorittanut kaikki tarvittavat kirjasimet, asiakas pyytää kaikkien fonttien olevan hieman isompia, voimme vain muuttaa tekstin kirjasinkokoa ja kaikkia muita typografian muutoksia suhteessa.

    Käyttämällä samaa kohde ÷ konteksti = tulos kaavan, muunnan jokaisen pikselipohjaisen fonttikoon emiksi. On syytä tietää, että kaikissa nykyaikaisissa työpöydän selaimissa kirjasimen oletuskoko on 16 pikseliä (ellei nimenomaisesti toisin mainita). Siksi alusta alkaen minkä tahansa seuraavien sääntöjen soveltaminen body-tagiin tuottaa saman tuloksen:

    font-size: 100%; font-size: 16px; font-size: 1em;

    Esimerkiksi tyylitaulukon ensimmäinen pikselipohjainen kirjasinkoko ohjaa sivuston otsikkoa, Ja voittaja ei ole ... ruudun vasemmassa yläkulmassa:

    #logo { display: block; padding-top: 75px; color: #0d0c0c; text-transform: uppercase; font-family: Arial, 'Lucida Grande', Verdana, sans-serif; font-size: 48px; } #logo span { color: #dfdada; }

    Kun 48 ÷ 16 = 3, tyylimme muuttuu seuraavasti:

    #logo { display: block; padding-top: 75px; color: #0d0c0c; text-transform: uppercase; font-family: Arial, 'Lucida Grande', Verdana, sans-serif; font-size: 3em; /* 48 divided by 16 = 3*/ }

    Voit käyttää samaa logiikkaa kaikkialla. Jos jossakin vaiheessa asiat menevät sekaisin, on todennäköistä, että kohteesi konteksti on muuttunut. Harkitse esimerkiksi

    sivumme merkinnässä:

    Every year when I watch the Oscars I'm annoyed...

    Uusi em-pohjainen CSS näyttää tältä:

    kuinka tehdä piirustus näyttämään vanhalta
    #content h1 { font-family: Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase; font-size: 4.3125em; } /* 69 divided by 16 */ #content h1 span { display: block; line-height: 1.052631579em; /* 40 divided by 38 */ color: #757474; font-size: .550724638em; /* 38 divided by 69 */ }

    Täältä näet, että .fontin koko (joka oli 38 px) elementti on suhteessa pääelementtiin (joka oli 69 pikseliä). Lisäksi viivankorkeus (joka oli 40 px) asetetaan suhteessa itse kirjasimeen (joka oli 38 px).



    Mutta mitä ihmeessä he ovat?

    Termi 'em' on yksinkertaisesti tapa ilmaista kirjain M kirjallisesti ja lausutaan samalla tavalla. (Historiallisesti M-kirjainta käytettiin tietyn kirjasimen koon määrittämiseen, koska se on levein kirjaimista.) Nykyään em mittauksena määrittää tietyn kirjaimen leveyden ja korkeuden osuuden pisteiden kokoon nähden. annettu fontti.

    Mennä kauemmas

    Tähän mennessä verkkosivuston rakenteen kokoa muutetaan oikein, kun sitä tarkastellaan erikokoisissa näkymissä, ja olemme vaihtaneet pikselipohjaisen tyypin em-muotoon. Meidän on vielä selvitettävä, miten kuvia voidaan skaalata näkymän koon muuttuessa ... mutta se on itse kirjan aihe.

    Sanat : Ben Frain

    Tämä artikkeli on eksklusiivinen ote Ben Frainin kirjasta Responsive Web Design with HTML5 and CSS3, jonka on julkaissut Pakettien julkaiseminen . Verkkokirjaversio maksaa tällä hetkellä 12,71 puntaa ja painettu painos 22,49 puntaa sisältäen e-kirjan. Sinä pystyt osta ne molemmat täältä .

    Piditkö tästä? Lue nämä!