Responsiv layout: hva det er og hvordan du bruker det

Responsiv layout endrer sidedesign basert på brukeratferd, plattform, skjermstørrelse og enhetsorientering og er en integrert del av moderne nettutvikling. Det lar deg spare penger betydelig og ikke tegne et nytt design for hver oppløsning, men å endre størrelsen og plasseringen av individuelle elementer.

Denne artikkelen vil gå over de grunnleggende elementene til et nettsted og hvordan du tilpasser dem.

Justering av skjermoppløsningen

I prinsippet kan du dele inn enheter i forskjellige kategorier og typesett for hver av dem separat, men det vil ta for lang tid, og hvem vet hvilke standarder som vil være om fem år? I følge statistikk har vi dessuten en hel rekke forskjellige oppløsninger:

Det blir åpenbart at vi ikke vil kunne fortsette å kode for hver enhet separat. Men hva skal man gjøre da?

Delløsning: gjør alt fleksibelt

Dette er selvfølgelig ikke ideelt, men det løser de fleste problemene.

Ethan Marcotte laget en enkel mal for å demonstrere bruken av fleksibel layout:

Ved første øyekast kan det virke som om alt er enkelt, men det er det ikke. Ta en titt på logoen:

Hvis du reduserer hele bildet, blir etikettene uleselige. Derfor, for å lagre logoen, er bildet delt inn i to deler: den første delen (illustrasjonen) brukes som bakgrunn, den andre (logoen) endres proporsjonalt.

h1-elementet inneholder bildet som bakgrunn, og bildet er justert til bakgrunnen til beholderen (header).

Fleksible bilder

Å jobbe med bilder er en av de største utfordringene når man jobber med responsive design. Det er mange måter å endre størrelse på bilder på, og de fleste av dem er ganske enkle å implementere. En løsning er å bruke max-width i CSS:

Img (maks-bredde: 100 %;)

Maksimal bredde på et bilde er 100 % av bredden på skjermen eller nettleservinduet, så jo mindre bredde, jo mindre er bildet. Merk at maks-bredde ikke støttes i IE, så bruk bredde: 100 %.

Den presenterte metoden er et godt alternativ for å lage responsive bilder, men ved å bare endre størrelsen vil vi la bildevekten være den samme, noe som vil øke lastetiden på mobile enheter.

En annen måte: responsive bilder

Teknikken, presentert av Filament Group, endrer ikke bare bilder, men komprimerer også oppløsningen til bilder på små skjermer for å øke hastigheten på lastetiden.

Denne teknikken krever flere filer tilgjengelig på Github. Først tar vi en JavaScript-fil ( rwd-images.js), fil .htaccess og rwd.gif(bildefil). Deretter bruker vi litt HTML for å knytte de store og små oppløsningene: først et lite bilde med prefiks .r(for å vise at bildet skal være responsivt), lenk deretter til det store bildet ved å bruke data-fullsrc:

For alle skjermer som er bredere enn 480 px, vil et bilde med høyere oppløsning lastes inn ( largeRes.jpg), og på små skjermer vil den lastes ( smallRes.jpg).

iPhone og iPod Touch har en spesiell funksjon: et design laget for store skjermer krymper ganske enkelt i en nettleser med liten oppløsning uten å rulle eller ekstra mobillayout. Bilder og tekst vil imidlertid ikke være synlig:

For å løse dette problemet brukes metakoden:

Hvis startskalaen er lik én, blir bredden på bildene lik bredden på skjermen.

Tilpassbar sidelayoutstruktur

For betydelige endringer i sidestørrelse kan det være nødvendig å endre layout på elementene generelt. Det er praktisk å gjøre dette gjennom et eget stilark eller, mer effektivt, gjennom en CSS-mediespørring. Dette burde ikke være noe problem siden de fleste stiler vil forbli de samme og bare noen få vil endre seg.

For eksempel har du et hovedstilark som definerer #wrapper, #content, #sidebar, #nav sammen med farger, bakgrunner og fonter. Hvis hovedstilene dine gjør oppsettet for smalt, kort, bredt eller høyt, kan du definere det og inkludere nye stiler.

style.css (hoved):

/ * Grunnleggende stiler som skal arves av det underordnede stilarket * / html, body (bakgrunn ... font ... farge ...) h1, h2, h3 () p, blockquote, pre, code, ol, ul () / * Strukturelle elementer * / #wrapper (bredde: 80%; margin: 0 auto; bakgrunn: #fff; polstring: 20px;) #innhold (bredde: 54%; flyte: venstre; margin-høyre: 3%;) # sidefelt-venstre (bredde: 20%; flyte: venstre; margin-høyre: 3%;) # sidefelt-høyre (bredde: 20%; flyte: venstre;)

mobile.css (barn):

#omslag (bredde: 90%;) #innhold (bredde: 100%;) # sidefelt-venstre (bredde: 100%; klar: begge; / * Ytterligere stiler for det nye designet * / border-top: 1px solid #ccc ; margin-top: 20px;) # sidebar-right (bredde: 100%; klar: begge; / * Ekstra styling for vår nye layout * / border-top: 1px solid #ccc; margin-top: 20px;)

På en bred skjerm passer venstre og høyre sidepanel godt på siden. På smalere skjermer er disse blokkene plassert under hverandre for større bekvemmelighet.

CSS3 mediespørringer

La oss ta en titt på hvordan du kan bruke CSS3-mediespørringer til å lage responsive design. min-width angir minimumsbredden på nettleservinduet eller skjermen som bestemte stiler skal brukes på. Hvis en verdi er under min bredde, vil stiler bli ignorert. max-width gjør det motsatte.

@mediaskjerm og (min-bredde: 600px) (.hereIsMyClass (bredde: 30%; flytende: høyre;))

Mediespørringen vil bare fungere når min-bredden er større enn eller lik 600 px.

@medieskjerm og (maks. bredde: 600px) (.aClassforSmallScreens (tydelig: begge; skriftstørrelse: 1,3em;))

I dette tilfellet vil klassen ( aKlasse for små skjermer) vil fungere når skjermbredden er mindre enn eller lik 600 px.

Mens min-bredde og maks-bredde kan gjelde for både skjermbredde og nettleservindusbredde, trenger vi kanskje bare å jobbe med enhetsbredde. For eksempel å ignorere nettlesere som åpnes i et lite vindu. Du kan bruke min-device-width og max-device-width for dette:

@medieskjerm og (maks-enhetsbredde: 480px) (.classForiPhoneDisplay (skriftstørrelse: 1.2em;)) @mediaskjerm og (min.enhetsbredde: 768px) (.minimumiPadWidth (klar: begge; marg-bunn) : 2px solid #ccc;))

Spesielt for iPad, medieforespørsler har egenskapen orientering, hvis verdier kan være enten landskap(horisontalt) eller portrett(vertikalt):

@medieskjerm og (retning: liggende) (.iPadLandscape (bredde: 30%; flyte: høyre;)) @mediaskjerm og (orientering: portrett) (.iPadPortrait (slett: begge;))

Verdiene til medieforespørsler kan også kombineres:

@media-skjerm og (min-bredde: 800px) og (maks-bredde: 1200px) (.classForaMediumScreen (bakgrunn: # cc0000; bredde: 30%; flyte: høyre;))

Denne koden vil bare kjøre for skjermer eller nettleservinduer med en bredde på 800 til 1200 px.

Du kan laste et spesifikt ark med stiler for forskjellige verdier av mediespørringer som dette:

JavaScript

Hvis nettleseren din ikke støtter CSS3 mediespørringer, kan erstatningen av stiler organiseres ved hjelp av jQuery:

Valgfri innholdsvisning

Evnen til å krympe og bytte elementer for å passe på små skjermer er stor. Men dette er ikke det beste alternativet. For mobile enheter er det vanligvis et bredere sett med endringer: forenklet navigering, mer fokusert innhold, lister eller rader i stedet for kolonner.

Heldigvis gir CSS oss muligheten til å vise og skjule innhold med utrolig letthet.

Display: ingen;

display: ingen brukes for objekter som skal skjules.

Her er vår markering:

Innhold på venstre sidefelt | Innhold på høyre sidefelt

style.css (hoved):

#innhold (bredde: 54%; flyte: venstre; margin-høyre: 3%;) # sidefelt-venstre (bredde: 20%; flyte: venstre; margin-høyre: 3%;) # sidefelt-høyre (bredde: 20 %; flyte: venstre;) .sidebar-nav (visning: ingen;)

mobile.css (forenklet):

#innhold (bredde: 100 %;) # sidefelt-venstre (skjerm: ingen;) # sidefelt-høyre (skjerm: ingen;). sidebar-nav (skjerm: inline;)

Hvis skjermstørrelsen reduseres, kan du for eksempel bruke et skript eller en alternativ stilfil for å øke mellomrommet eller erstatte navigasjonen for mer bekvemmelighet. Med muligheten til å skjule og vise elementer, endre størrelse på bilder, elementer og mye mer, kan du tilpasse designet til enhver enhet og skjerm.

Hilsen alle HeavenWeb blogglesere. I dag i bloggen vil jeg gi et eksempel på den såkalte responsive layouten, og også, som et eksempel, vil jeg vise hvordan man lager en enkel layout som tar hensyn til tilpasningsevne for ulike skjermoppløsninger.

Enkelt sagt forstås adaptiv eller "responsiv" layout som et slikt arrangement av blokker og elementer, som tilpasser seg størrelsen og oppløsningen til enhetsskjermen som siden åpnes med.

Med den økende populariteten til nettbrett og smarttelefoner, er webmastere pålagt å støtte nye formater for visning av nettsteder, og følgelig nye skjermoppløsninger der disse nettstedene åpnes.

Den mest kritiske verdien er bredden på nettleservinduet. Minimum på de mest budsjettsmarttelefoner er 240-360px, men i de fleste tilfeller er det fortsatt 480px og høyere. Og det er mer enn halvparten av størrelsen på en standard 1024-pikslers skjerm.

Et annet viktig poeng er store skjermer med høy oppløsning, som heller ikke bør glemmes. Målet til webmasteren er å få nettstedet til å tilpasse seg oppløsningen og unngå horisontal rulling på hvilken som helst skjerm.

Dette kan oppnås på bekostning av CSS-mediespørringer, samt stilegenskaper som begrenser minimum og maksimum bredde og høyde innenfor de angitte grensene.

Men alt er bedre vist ved eksempel. La oss lage en enkel responsiv layout med et minimum av elementer, utseendet til det ferdige eksemplet kan sees på demosiden:

Så våre krav til tilpasningsevnen er som følger:

• Bredden på hoveddelen skal strekkes ved høye oppløsninger, men opp til en viss verdi, fordi for lange linjer ikke er praktisk å lese.
• Etter hvert som nettleserens bredde krymper, bør bildene krympe proporsjonalt for å holde seg innenfor områdets grenser.
• Med en bredde på mindre enn 700 piksler (minimum - et nettbrett eller smarttelefon med HD-skjerm i stående retning), skal de tre blokkene nederst på linje etter hverandre og oppta 100 % av bredden til hovedblokken.
• Samtidig skal den venstre sidestangen brettes til en smal stripe, og frigjøre plass til hoveddelen.
• Oppgi en knapp, trykk på som åpner og lukker sidefeltet, som nå skal være plassert over hovedblokken, i form av en popup-meny.

La oss begynne. Jeg laget en index.html-fil, og css- og bildemapper, hvor jeg plasserte henholdsvis stilfilen og bildene klippet ut fra layouten.

La oss lage to rotbeholdere i HTML-filen, henholdsvis left_side og .wrapper, for venstremenyen og hoveddelen. B. left_side satte noen markeringer for logoen, sosiale lenker og en menyliste med punkttegn.

I den høyre hovedblokken vil vi pakke hvert innlegg med en div med .text_block-klassen, legge til plassholdertekst fra Yandex-abstraktverktøyet, og bilder for eksempel.

Legg til tre blokker .footer_block til bunnen, pakk dem inn i en common.footer. La oss legge til overskrifter H2, H3 til artiklene, og som et resultat vil vi få markering som dette:

Vær oppmerksom på linje 6. Faktum er at mobile enheter skalerer nettsider for enkel visning, men vi trenger ikke dette. Med denne metaoppføringen forbyr vi sideskalering.

La oss nå gå inn på CSS-stiler. La oss ordne venstre blokk:

Venstre_side (bakgrunn: # 1d282b; bredde: 300px; posisjon: fast; venstre: 0; topp: 0; høyde: 100%; z-indeks: 5;) .logo_text (utfylling: 20px 10px; farge: #ffffff; font- størrelse: 24px; linjehøyde: 30px; font-weight: normal; font-family: myPTNarrow; text-align: center;) .logo_text a (display: inline-block;) .logo_text span (farge: # 72898f; font -størrelse: 18px; linjehøyde: 24px; polstring: 0 10px 18px; tekstjustering: center; display: block;) .left_menu (margin-top: 30px;) .left_menu ul (display: block; list-style- type: ingen;) .left_menu li (display: block; height: 30px; line-height: 30px;) .left_menu li a (display: block; line-height: 30px; font-size: 18px; font-family: myPTNarrow ; farge: #ffffff; tekstdekorasjon: ingen; polstring-venstre: 60px;) .left_menu li a: hover (bakgrunn: # 343e41;) .social_img (tekstjustering: center;) .social_img a (display: inline- blokk; margin: 0 10px; bredde: 30px; høyde: 30px; overløp: skjult;) .social_img a: hover (opasitet: 0,7;) .tw_i con (bakgrunn: url ("../ images / social.png") øverst til venstre no-repeat; ) .go_icon (bakgrunn: url ("../ images / social.png") øverst til høyre no-repeat;) .left_swap (visning: ingen; / * Som standard er blokken ikke synlig, den vises hvis en media forespørselen utløses * / posisjon: fast; bredde: 50px; venstre: 0; topp: 0; høyde: 100%; z-indeks: 6; bakgrunn: url (../ images / swipe.png) # 1d282b center 20px no -gjenta;)

Her spesifiserte vi posisjon: fast for .left_side-beholderen. Denne egenskapen lar boksen alltid forbli til venstre (takket være venstre: 0; topp: 0; og høyde: 100 %;) og ikke rulle med hovedinnholdet. For å sikre at blokken ikke overlapper med noe, legg til z-indeks: 5.

Siden bredden på venstre boks er 300 piksler, bør midtboksen (.wrapper) ha en indre polstring fra venstre kant - padding-venstre: 300px, for ikke å "falle" under venstre meny.

Generell kode for sentralenheten:

Wrapper (posisjon: relativ; bakgrunn: #ffffff; min-høyde: 200 %; min-bredde: 400px; maks-bredde: 1200px; polstring-venstre: 300px; polstring-høyre: 0px; box-shadow: 0 0 10px rgba (0,0,0,0.2);) .wrapper a (farge: # 576a6f;) .wrapper a: hover (farge: # 1d282b;) .text_block (overflyt: skjult; farge: # 4a4a4a; skriftstørrelse: 18px ; linjehøyde: 24px; min-høyde: 200px; bakgrunn: url ("../ images / hr.png") venstre nedre repetisjon-x; utfylling: 10px 40px 10px;) p (margin-bunn: 24px;) .cent_img (display: block; margin: 0 auto 40px;) .auto_img (display: block; maks-width: 100%; margin: 0 auto 24px;)

Det viktigste her er dekorasjonen av bredden på denne blokken. For .wrapper vil vi spesifisere egenskaper

Min-bredde: 480px; maks-bredde: 1200px;

Det vil si at når skjermen forstørres i bredden, vil blokken utvides med innholdet opp til 1200 piksler, så forblir den på venstre side, og til høyre vil det bare være en bakgrunn. Når du reduserer den, vil den krympe til 400px, hvis den er sterkere, vil horisontal rulling vises.

Bilder inne i den sentrale blokken må være av .auto_img-klassen. Hvis de ikke passer i bredden, vil de krympe proporsjonalt og vil være lik 100 % av bredden på beholderen.

La oss deretter håndtere CSS-mediespørringer. Alle slike forespørsler er som følger. Først kommer @media-overskriften, deretter angis typen enhet du vil bruke css-koden for denne forespørselen på. For en vanlig fargeskjerm er dette ordet skjerm (eller oftere skriver de alt som er, for alle enheter). Da er forhold og parametere angitt i parentes.

Nå er vi interessert i maks-enhetsbredde-betingelsen, som indikerer at følgende regler bare vil bli brukt for modusen når den maksimale nettleserbredden er mindre enn en viss verdi spesifisert etter kolon.

Det vil si at en av betingelsene våre vil se slik ut:

@media-skjerm og (maks-bredde: 800px) (.left_side (display: none;) .left_swap (display: block;) .wrapper (polstring-venstre: 50px;))

I krøllete klammeparenteser har vi allerede lagt ned de nødvendige CSS-reglene, nemlig vi skjuler venstremenyen, og viser den tidligere skjulte ekstra smale venstre blokken - .left_swap.

La oss legge til en annen betingelse for å overføre de nederste horisontale blokkene til den vertikale raden.

@medieskjerm og (maks. bredde: 720 px) (.footer_block (skjerm: blokk; bredde: 96 %;))

De. elementer slutter å være inline, og blir blokkaktige, på grunn av at de stiller opp etter hverandre. Med bredden: 96% eiendom øker vi deres bredde til det maksimale (ikke til 100%, siden vi beholder polstringer - interne marginer).

Her tok jeg utgangspunkt i at oppløsningen på nettbrett og smarttelefoner HD vanligvis er 800 piksler i stående retning, så for alt under er menyblokken skjult.

Faktisk kan CSS-mediespørringer være kompliserte ved å legge til flere betingelser samtidig ved å bruke og-operatorene. Du kan definere ikke bare skjermbredden, men også høyden, retningen, antall støttede farger og andre parametere.

Til slutt, la oss bruke jQuery for å åpne venstremenyen ved å klikke på den sammenslåtte smale venstre blokken - på .left_swap. For eksempel slik:

JQuery (function ($) ($ (". Left_swap"). Klikk (function () ($ (". Left_side"). Toggle (); return false;));))

Alt er ekstremt enkelt her, vi behandler klikket på blokken og viser eller skjuler blokken med menyen. Koden kan være for enkel og kan forbedres, men den vil fungere som et eksempel.

Vi har derfor vurdert et eksempel på layout for et adaptivt nettsted, og resultatet som er oppnådd kan sees som vanlig på demosiden. Prøv å øke eller redusere bredden på nettleservinduet og observer oppførselen til blokkene mens du gjør det.

PS: Den siste tiden har bloggen mye spam i kommentarene, jeg har ikke alltid tid til å rydde i den, men jeg leser likevel alle kommentarene dine til saken og skal prøve å svare.

Fra forfatteren: i fremtiden forventes mobiltrafikken å vokse jevnt og trutt i internettverdenen. Dette betyr at du nå må kunne sette inn slik at prosjektet ser bra ut på alle enheter. Løsningen er for lengst funnet - adaptiv layout av nettstedet! Vi vil snakke om det.

2 måter å glede mobilbrukere

Den enkleste måten å finne ut hvordan området er lagt ut på, er å redusere størrelsen på vinduet. Hvis en horisontal rullelinje vises, er dette et fast oppsett. Alle størrelser ble angitt, mest sannsynlig, i piksler. Vil det være praktisk for brukere å bruke et slikt nettsted på mobile enheter? Nei.

Det er i hovedsak to løsninger på dette problemet. Den første er å lage forskjellige versjoner av oppsettet (for PC-er, for nettbrett og for mobiltelefoner). Det er akkurat det som gjøres for eksempel på det sosiale nettverket Vkontakte. Det andre alternativet er å lage en responsiv layout. Et slikt nettsted vil reagere på endringer i vinduets bredde. Dette alternativet brukes mer og oftere i dag.

Ris. 1. Som du kan se, selv på en mobiltelefon, vises webformyself godt.

Tilpasningsevne er begynnelsen på veien

Responsive layout er ikke forskjellig fra den vanlige, bortsett fra at mediespørringer legges til stilarket, der stiler er skrevet for forskjellige skjermbredder. Noen ganger tas de ut i en egen css-fil, og noen ganger skrives de på slutten av hovedstilarket. Et eksempel på en medieforespørsel:

@media only-skjerm og (maks. bredde: 980px) ()

@ bare medieskjerm og (maks - bredde: 980px) ()

La oss se nærmere på dette innlegget.

@media - selve betegnelsen på en medieforespørsel

Skjerm - vi angir at dette refererer til skjermen (her kan du også angi en TV eller en projektor). Bare - betyr at reglene kun vil gjelde for skjerm.

Og (og) - legge til en tilstand som mediespørringen vil fungere for. Tilstanden er lagt til i parentes.

Maks-bredde: 980px - selve tilstanden. Enkelt sagt betyr dette at mediespørringen vil fungere når skjermbredden er maksimalt 980 piksler (det vil si fra 0 til 980 piksler). Hvis bredden er større enn 980, vil ikke reglene fungere. Oftest brukes max-width, min-width, max-device-width, min-device-width som en betingelse. De to siste betyr at reglene kun vil fungere på selve mobilenhetene (det vil si at når vindusbredden endres på datamaskinen, vil en horisontal rulling vises). Du kan også angi maks-høyde, men dette brukes sjelden.

() - alle css-regler er skrevet i disse krøllete klammeparentesene. Det kan være så mange av dem du vil. Jeg vil gi et par eksempler på en gang slik at du forstår:

@bare media-skjerm og (maks. bredde: 980px) (.selector (bakgrunn: svart)) @bare media-skjerm og (min-bredde: 600px) (img (flytende: venstre))

@ bare medieskjerm og (maks - bredde: 980px) ( Velger (bakgrunn: svart) @ bare medieskjerm og (min - bredde: 600px) ( img (flyt: venstre)

Oversatt til menneskelig språk: hvis vindusbredden er mindre enn 980 piksler, vil (bakgrunn: svart) regelen bli brukt på elementet med velgerklassen. I enda enklere termer vil bakgrunnen til dette elementet bli svart.

Andre eksempel: hvis bredden på vinduet er mer enn 600 piksler, vil alle bildene bli justert til venstre kant.

Har du allerede fått hele genialiteten til denne layoutmetoden? Ved å bruke medieregler kan du faktisk korrigere eksisterende eller legge til nye css-regler. På denne måten kan du implementere en fullstendig responsiv mal.

Ris. 2. Et eksempel på en medieforespørsel som spesifiserer reglene for widescreen-skjermer.

Finn ut mer om respons

Dette er forståelig, men hvordan lager du et responsivt nettstedoppsett selv? For å gjøre dette er det tydeligvis ikke nok for deg å registrere disse to eksemplene. Jeg håper du forstår poenget med dem, men de er til liten nytte. Vi trenger reell nytte. Og du kan få det fra. Men det er hvis du tar tilpasningsevne på alvor. Faktum er at siden kurset er betalt, vil du etter å ha studert det selv kunne lære andre om adaptiv layout.

Hvis du trenger noe enklere, bare for å finne ut av det, så vil denne passe deg mye bedre. Den består av fem videoveiledninger som vil veilede deg gjennom det grunnleggende. Kurset er veldig enkelt, informasjonen er spesielt utvalgt for nybegynnere. I mellomtiden vil du kunne se på noen praktiske eksempler, slik at du etter å ha lært det selv kan tilpasse en enkel layout.

Er det vanskelig å mestre responsiv layout?

Da jeg nettopp begynte å lære meg nettteknologi, visste jeg ikke engang helt hva et responsivt nettstedoppsett er. Det var ikke mulig å gjøre dette selv. Frykt er vår hovedfiende. Det viste seg at alt er ganske enkelt. Og nå, når jeg av og til ser gjennom koden for responsive maler, innser jeg hvor enkelt det noen ganger er å implementere respons.

Hvordan teste tilpasningsevne

Den enkleste måten å gjøre dette på er i en nettleser. For eksempel, i Google Chrome, når jeg trykker på F12, vises en feilsøker. Prøv nå å endre størrelsen på vinduet. I øvre høyre hjørne vil du se verdien for bredden. Dette er veldig praktisk for raskt å sjekke oppsettet ditt. Jeg kan også anbefale responsivetest.net. Tjenesten er ganske praktisk og kontrollerer tilpasningsevnen perfekt.

Ris. 3. Når du holder nede F12, vises feilsøkingsprogrammet. Nå i øvre høyre hjørne kan du se gjeldende bredde på vinduet når det endres.

Hvorfor responsiv layout?

I begynnelsen av artikkelen sa jeg at det er en annen måte å glede mobilbrukere på - å utvikle separate versjoner for forskjellige enheter. Hvilken måte synes du er enklere? Det er mye lettere å implementere respons. Dette er bare et par hundre ekstra linjer med kode, og ikke en egen versjon av siden, som ofte er veldig forskjellig i design. Som praksis viser, lages mobilversjoner for nettstedene deres kun av store selskaper som har råd til å bruke mer penger på prosjektutvikling.

For alle andre er responsiv layout det du trenger å strebe etter akkurat nå. Og siden mobiltrafikken bare vil vokse, begynn å implementere den nå. Og abonner samtidig på bloggen vår for å forbedre kunnskapen din om nettstedbygging.

JavaScript er blokkert i nettleseren din. Aktiver JavaScript for at nettstedet skal fungere!

For øyeblikket får besøkende tilgang til nettsteder ikke bare fra en stasjonær datamaskin, men også fra en bærbar datamaskin, nettbrett eller smarttelefon. Samtidig, på enheter med liten skjerm, er teksten ofte for liten, lenker er praktisk talt uklikkbare, og kontrollene er for nær hverandre.

For å eliminere disse manglene begynte de å utvikle separate mobilversjoner av nettsteder. Men den er lang, dyr og upraktisk å vedlikeholde.

Løsningen på problemet - Adaptiv layout der CSS-stiler endres dynamisk for forskjellige bredder av nettleservinduet.

Eksempel

Et eksempel på en responsiv layout er nettstedet domportretov.ru, der siden tilpasser seg flere intervaller av nettleservinduets bredde, samtidig som den opprettholder maksimal komfort for besøkende:

Utviklingen av en responsiv layout utføres oftest fra en eksisterende side for en stor skjerm til mindre skjermer. Du kan sjekke resultatet av arbeidet på forskjellige måter:

1. bare endre størrelsen på nettleserskjermen,
2. plasser komponentinspektørpanelet til høyre og endre bredden,
3. bruk responsiv nettleserdesign ved å klikke Ctrl + Shift + M i Firefox eller Google Chrome.

Hva brukes til å optimalisere et nettsted for mobile enheter?

Viewport-metatag

Som standard tar mobilnettlesere en side som en side på en vanlig datamaskin og skalerer den for å passe til bredden på telefonskjermen. Som et resultat blir teksten liten, og den besøkende må zoome inn på siden for å lese den.

For å justere størrelsen og skalaen på siden med tanke på bredden på skjermen, bruker enheter viewport metatag som inneholder instruksjoner for nettleseren.

For å fortelle nettleseren at siden reagerer på en hvilken som helst enhet, legges viewport-metakoden til i dokumentoverskriften.

Eksempel

Grunnleggende egenskaper for metataggen

bredde	Bredden på det synlige området. Anbefalt verdi: enhetsbredde.
høyde	Høyden på det synlige området. Anbefalt verdi: enhetshøyde.
innledende skala	Den opprinnelige skalaen til siden. Godtar en verdi fra 1 til 5. Anbefalt verdi: 1.
minimumsskala	Minimum sideskala. Tar en verdi som må være mindre enn eller lik initialskalaen. En verdi på 1 forhindrer at siden skaleres ned.
maksimal skala	Maksimal skala på siden. Tar en verdi som må være større enn eller lik initialskalaen. En verdi på 1 forbyr zooming på siden.
bruker-skalerbar	Aktiverer eller deaktiverer muligheten til å skalere siden. Er sant eller usant.

Innhold som er bredere enn skjermen er et vanlig problem når visningsporten er satt.

Dette skjer hvis noen elementer er satt til en stor fast bredde.

For å forhindre at horisontal rulling vises, settes sidebredden til fullskjerm, om nødvendig, begrenset av egenskapen max-width.

Eksempel

.content (bredde: 100 %; maks-bredde: 1200 piksler;)

Mediespørsmål. CSS Standard Media Queries

Muligheten til å bruke en annen design avhengig av bredden på vinduet gir CSS Standard Media Queries.

Medieforespørsel starter med regelen @media etterfulgt av en betingelse for å bruke stiler, bestående av medietypen (i eksemplet alle), logisk operatør ( og) og mediefunksjoner ( maks bredde: 360px).

Medietyper

alle	Alle typer.
skrive ut	Skrivere og andre utskriftsenheter.
skjerm	Monitorskjerm.
tale	Talesyntese og programmer for å spille tekst høyt. For eksempel talenettlesere.
Utdaterte, om enn riktige, typer som ikke fungerer
punktskrift	Punkteskrift som er designet for å kunne leses av blinde.
preget	Punktskriftskrivere.
håndholdt	Håndholdte enheter, smarttelefoner, enheter med små skjermbredder.
projeksjon	Projektorer.
tty	Enheter med fast tegnstørrelse (teleskrivere, terminaler, enheter med skjermbegrensninger).
TV	TV-er.

Logiske operatører

Grunnleggende mediefunksjoner

Eksempel

Størrelsen på overskriften er satt:

H1 (skriftstørrelse: 72px;)

På en stor dataskjerm ser denne tittelen fin ut, men den er for stor for en vertikal smarttelefonskjerm. For skjermer som er mindre enn eller lik 360 piksler brede, kan du redusere skriftstørrelsen ved å bruke en mediespørring:

@media alle og (maks. bredde: 360px) (h1 (skriftstørrelse: 42px;))

Nye dimensjonsenheter (vw, vh, rem)

vw	1 % av bredden på nettleservinduet (visningsport).
vh	1 % av høyden på nettleservinduet (visningsport).

Takket være disse enhetene er det nå enkelt å spesifisere den relative høyden til et element i CSS.

Eksempel

kropp (min-høyde: 100vh;)

Det er praktisk å sette skriftstørrelsen i en responsiv layout i rem (root em). Denne enheten beregnes basert på skriftstørrelsen til rotelementet ... Som standard 1rem = 16px. For å lette beregningen kan skriftstørrelsen til rotelementet settes til 10px.

Eksempel

html (font-size: 10px;) body (font-size: 1.6rem;) h1 (font-size: 7.2rem;) @media all og (max-width: 360px) (body (font-size: 1.4rem;) ) h1 (skriftstørrelse: 4,2rem;))

I dag er det vanlig å okkupere hele bredden av nettleservinduet. Samtidig brukes det aktivt horisontale lister, som ser bra ut og er enkle å lese på en stasjonær dataskjerm. Men på skjermen til en mobilenhet blir elementene i en slik liste for smale. Det er nødvendig å gjøre en horisontal liste til en vertikal.

Flexbox-spesifikasjonen lar deg kontrollere størrelsen, rekkefølgen og justeringen av elementer horisontalt og vertikalt, og fordelingen av ledig plass mellom dem. I dette tilfellet kan blokkene komprimeres og strekkes i henhold til de angitte reglene, og tar opp nødvendig plass.

Flexbox definerer CSS-egenskaper for flex-beholderen og dens underordnede (i eksemplet henholdsvis ul.flex og li.flex).

Eksempel

ul.flex (display: flex; / * flex container * / flex-wrap: wrap; / * multiline mode * / justify-content: space-between; / * elementer er jevnt fordelt (først på begynnelsen av linjen, sist på slutten) * /) li.flex (display: inline-block; flex-basis: 260px; / * grunnbredde på elementet * / flex-grow: 1; / * alle elementer har samme bredde * / max-width : 300px; polstring: 8px;)

Som et resultat: listeelementene er strukket til full tilgjengelig bredde (begrenset til 300 px):

På en smal skjerm blir listen vertikal:

Ved å bruke Flexbox kan du endre rekkefølgen på varene og enkelt stille inn vertikal justering.