Html adaptiv layout. Adaptiv layout

Hei alle sammen!

Da prinsippet om adaptiv layout dukket opp, viste det seg å være et mareritt for meg, som jeg fortsatt ikke kan komme meg fra, det er så vondt - tross alt, for hver oppløsning du praktisk talt trenger å omorganisere oppsettet, skrive ny kode, du ender opp med mye kode som er vanskeligere å vedlikeholde. La oss forstå denne smerten som "kodeentropi"

Nylig fikk jeg muligheten til å lage et oppsett for en mobilapplikasjon, og jeg bestemte meg for å endelig prøve å overvinne denne smerten, gjøre den vakker og konsis - bruk rem. Dette virket som den enkleste løsningen for meg, 100 % av mobilnettleserne støtter denne enheten. Poenget er at vi skriver flere linjer med mediespørringer for html-taggen, som kun indikerer de grunnleggende skriftstørrelsene i piksler, i forhold til hvordan oppsettet vårt skal se ut i forskjellige oppløsninger, og resten av oppsettet uten mediespørringer er lagt ut som vanlig, bare vi bruker piksler i stedet rem. Denne teknikken er lett skalerbar og justerer oppsettet avhengig av grunnskriftstørrelsen.
Minimeringen av kode og den enkle adaptive layouten på denne måten er rett og slett kolossal!

Det var bare en ulempe med denne metoden: det var nødvendig å hele tiden beregne piksler i psd-oppsettet på nytt til rem, men jeg løste raskt dette problemet - jeg skrev en spesiell funksjon og la den ut som før i piksler, selve forprosessoren ble oversatt til rem.

Men! Hovedspøken er at jeg brukte denne metoden til å designe en adaptiv mobilapplikasjon, der designet var det samme.

Da jeg kom tilbake til det adaptive for vanlige nettsteder- smerten kom tilbake til meg enda kraftigere enn før, fordi vi som regel har fra 3 til 6 forskjellige design:
1) Stort skrivebord 1600-1920 piksler
2) Liten stasjonær/bærbar PC ~1100-1400 piksler
3) Gammel Monica/nettbrett - 768-1024 piksler
4) Under-nettbrett/overdimensjonert smarttelefon ~600 piksler
5) Smarttelefon 300-480
6) Gammel smarttelefon 250 piksler.

Selvfølgelig overdrev jeg, men minst tre oppsett må gjøres helt sikkert.

Så her er spørsmål nr. 1 og det viktigste: hvordan minimere adaptiv layout og gjøre koden vakker? Hvordan redusere den såkalte entropi av koden? Finnes det noen kul tilnærming/teknikk?

Jeg så på forskjellige nettsteder til kule nettstudioer for å finne svaret der og så at alle la ut tilfeldig, det vil si generelt uten å bry seg.
Det eneste jeg så er at noen av en eller annen grunn bruker em og prosenter for fonter i stedet for de vanlige piksler. Det virker som for skalering av tekst, selv om det ikke er klart hvordan dette reduserer koden for tilpasning, etter min mening kompliserer det bare alt - du må utføre beregninger avhengig av skriftstørrelsen til den overordnede blokken og til og med forprosessorer vil mest sannsynlig ikke hjelp... Jeg vet ikke hvorfor du trenger å bekymre deg for å angi skriftstørrelser i em-enheter, problemene med rem har fortsatt ikke gått noen steder... Kanskje jeg er en dårlig layoutdesigner... Forresten, den mest gjenstridige av disse nettstedene brukte dem for marginer og andre egenskaper i boksstørrelse ...
Spørsmål #2:
Hva er vitsen med å bruke dem?
Og nå spørsmål nummer 3:
Finnes det virkelig ingen enkel metodikk, er alt virkelig så dårlig i oppsettet at alle kan gjøre hva de vil? Eller så jeg mislykkede eksempler (selv om jeg så blant de beste temaene til themeforest og nettstedene til de beste nettstudioene)?

Forord

For tiden vokser andelen mobiltrafikk raskt. Hver dag er det flere og flere som bruker enheter med Internett-tilgang. Telefonen er alltid for hånden, hvor som helst hvor folk kan slå opp nødvendig informasjon, lese nyheter osv. En vanlig nettside kan sees ved hjelp av en mobilenhet. Noen nyanser oppstår imidlertid ved visning - for å lese individuelle tekstblokker på en relativt liten skjerm, må du skalere siden. Som et resultat går det tapt for lesbarhet og brukervennlighet, og siden må hele tiden rulles, strekkes og zoomes inn. Mange nettstedkontroller er vanskelige å bruke fordi sidene ikke er laget for å betjenes ved å berøre skjermen. For å løse disse problemene begynte de å utvikle nettsteder som enkelt kan vise informasjon på hvilken som helst enhet.

Om artikkelen

Denne artikkelen er ment for utviklere som har erfaring med nettstedoppsett og som vet HTML Og CSS som forstår formålet med CSS-velgere osv.

Denne artikkelen vil diskutere typene oppsett som lar deg vise nettsteder på riktig måte i en hvilken som helst oppløsning, og teknikkene som gjør dette. La oss se på konseptet CSS-ramme og gjøre en komparativ analyse av de mest populære.

Typer oppsett

La oss se på hovedtypene av oppsett, deres forskjeller og de grunnleggende prinsippene som brukes i implementeringen.

Fast layout

Fixed Layout er en tilnærming til å lage nettsider som har en gitt bredde. Bredden på komponentene på siden endres ikke. På skjermer med lav oppløsning vises et horisontalt rullefelt. Denne typen layout er ikke egnet for praktisk visning av informasjon på mobile enheter.
Eksemplet nedenfor viser streng innstilling av bredden for en tag kropp:

Gummi layout

Elastisk layout innebærer muligheten for nettstedkomponenter til å endre størrelsen avhengig av størrelsen på nettleservinduet, og strekker seg fra og til de spesifiserte minimums- og maksimumsstørrelsene. Dette oppnås ved å bruke relative verdier, maks-bredde / min-bredde(maks/min bredde), maks-høyde / min-høyde(maksimum/minimum høyde).
Eksempler på bruk av gummilayoutteknikker:

Adaptiv layout

Adaptiv layout ( Adaptiv layout ) lar hovedbeholderen og ethvert annet element på nettstedet tilpasse seg skjermoppløsningen, noe som gjør det mulig å endre skriftstørrelse, arrangement av objekter, farge osv. Dette skjer dynamisk, for eksempel ved bruk av mediespørringer ( @media), slik at du automatisk kan bestemme skjermoppløsningen, enhetstypen og erstatte de angitte verdiene i automatisk modus. Eksempelet nedenfor angir bredden div lik 960 piksler 1200 piksler Og 320 piksler for alle enheter med mindre bredde 480 piksler.

Responsive layout

Responsive Layout er en kombinasjon av flytende og adaptiv layout. Denne tilnærmingen bruker både mediespørringer og prosentvis spesifikasjon av komponentbredder. Ved å bruke denne typen layout kan vi trygt si at nettstedet vil tilpasse seg enhver enhet.
Bredden er satt nedenfor div lik 50 % av størrelsen på den overordnede komponenten for alle enheter hvis bredde er mindre enn 1200 piksler og 100 % for alle enheter hvis bredde er mindre enn 480 piksler.

Grunnleggende teknikker for å implementere nettsteder i enhver oppløsning Relative verdier

Ved å bruke relative verdier kan du vise informasjon og komponenter på en side uten å miste lesbarhet eller synlighet.

Relative verdier for størrelser og polstringer

Relative verdier kan spesifiseres for bredde, høyde, margin, polstring osv. Den mest kjente måten å spesifisere den relative størrelsen på er i prosent (%).
Nedenfor er et eksempel på å sette bredden til 90 % av størrelsen på den overordnede komponenten.

I dette tilfellet beregnes verdien i forhold til den overordnede komponenten.
Det er også verdier angående skjermstørrelse:

• vw- 1 % av vindusbredden. Når vindusbredden reduseres, reduseres bredden, høyden og fonten til elementet;
• vh- 1 % av vindushøyden. Når vindushøyden reduseres, reduseres bredden, høyden og fonten til elementet;
• vmin - velg den minste av vw Og vh;
• vmax - den største er valgt vw Og vh.

Nedenfor er et eksempel på bruk vw Og vh. I dette tilfellet, bredden og høyden på taggen div vil være lik henholdsvis 50 % av skjermens bredde og høyde.

Relative verdier for skriftstørrelse

Følgende relative verdier for fonter finnes:

• em- setter størrelsen i forhold til den overordnede fonten;
• rem- setter størrelsen i forhold til fonten.

La oss se på et eksempel:

Beregn skriftstørrelsen for taggen kropp. I dette eksemplet er skriftstørrelsen for kropp spesifisert i forhold til størrelse html. Så skriftstørrelsen for kropp vil være lik 30 px (20px * 1.5 = 30px).

Du kan også angi relative skriftstørrelser ved å bruke %, vw, vh osv. I det følgende eksempelet er skriftstørrelsen for kropp lik 80 % av skriftstørrelsen html - 16px.

Maksimum og minimum komponentstørrelser

For å angi maksimums- og minimumsverdier for bredden og høyden til en komponent, bruk egenskapene maks-bredde / min-bredde Og maks-høyde / min-høyde hhv.

La oss se på et eksempel:

La oss anta at den overordnede komponenten av dette div er kropp. Deretter, når skjermbredden endres, vil bredden på denne komponenten være 60 % av bredden kropp. Den vil imidlertid bare øke til det beløpet som er spesifisert i maks bredde, dette er 500 px. Så snart beholderen når denne bredden, vil den slutte å vokse.

Bruke Media Queries

Mediespørringer lar deg spesifisere stiler for en bestemt skjermstørrelse, enhetstype basert på enhetsegenskaper osv. Alle mediespørringer begynner med @media, og følger deretter betingelsen.

Ved å bruke mediespørringer kan du angi stiler for følgende enhetstyper:

• alle- alle typer (standardverdi)
• punktskrift- enheter basert på punktskrift, som er beregnet for lesing av blinde
• preget- skrivere som bruker punktskriftssystemet for utskrift
• håndholdt- smarttelefoner og lignende enheter
• skrive ut- skrivere og andre utskriftsenheter
• projeksjon- projektorer
• skjerm- skjerm
• tale- talesynthesizere, samt programmer for å spille tekst høyt
• tty- enheter med fast tegnstørrelse
• TV- TVer.

Et eksempel på innstilling av bredden for en div-tag, på monitorskjermer, smarttelefoner osv.

Lenker til teknikker for implementering av adaptiv layout

Du kan se og studere tilnærmingene diskutert i denne artikkelen og andre mer detaljert ved å bruke følgende koblinger:

• Bør vi lage en mobilversjon? 5 vanlige problemer som adaptiv layout løser. Yandex opplevelse

CSS-rammeverk

CSS-framework - et rammeverk laget for å forenkle arbeidet til en layoutdesigner, fremskynde utviklingen og eliminere maksimalt mulig antall layoutfeil (kompatibilitetsproblemer med forskjellige versjoner av nettlesere, etc.). Disse rammene innebærer bruk av ulike tilnærminger for å vise nettsteder riktig på enheter av alle størrelser.
Mange utviklere foretrekker å bruke CSS-rammer, i stedet for å skrive alle stilene manuelt. Dette skyldes følgende årsaker:

• Raskere utvikling
• Støtte for flere nettlesere
• Støtter ulike enheter og skjermstørrelser
• Kodekonsistens når du jobber som et team reduserer uenigheter under utvikling.

Som biblioteker med programmeringsspråk for skript, CSS-biblioteker, vanligvis med et ytre utseende CSS-filen legges til overskriften på nettsiden.

La oss se på de mest populære CSS-rammer.

Støvelhempe

Det mest populære rammeverket for responsiv og mobil utvikling web-prosjekter. Støvelhempe er et åpen kildekodeverktøy for å utvikle nettsider ved hjelp av HTML, CSS og JS. Støvelhempe- et intuitivt enkelt og samtidig kraftig grensesnittramme som øker hastigheten og letter utviklingen web-applikasjoner.

Støvelhempe Skalerer prosjektet ditt enkelt og effektivt med én kodebase – fra telefoner og nettbrett til stasjonære datamaskiner. Et 12-kolonne rutenett brukes til dette:

I tillegg til CSS dette rammeverket inkluderer støtte for de to mest populære CSS-forprosessorer: Mindre Og Sass.

Karakteristiske trekk:

• 12 - kolonnerutenett
• Stort antall ferdige komponenter
• Brukerstøtte Mindre Og Sass
• Bruk Normaliser.css.

Materialdesign for Bootstrap

Materialdesign for Bootstrap er en åpen kildekode applikasjonsutvikling verktøysett basert på Støvelhempe og bruke tilnærminger Materialdesign.
Rammeverket lar deg raskt lage en applikasjon ved hjelp av variabler Sass, adaptivt rutenett, et stort antall ferdige komponenter og kraftige plugins implementert i jQuery.

Karakteristiske trekk:

• 12 - kolonnerutenett
• Et stort antall ferdige komponenter i henhold til konseptet Materialdesign.

Jeg er ikke en profesjonell innen webdesign og layout. I utgangspunktet kommer all min aktivitet i denne retningen ned til mindre endringer i eksisterende maler. Men en dag ville jeg virkelig finne ut "hvordan det fungerer", og jeg satte sammen et sett med grunnleggende regler for å lage en responsiv nettsidemal i en artikkel.

Konseptet om tilpasningsevne

Tilpasningsevne skal forstås som et nettstedoppsett der utseendet til nettstedet endres avhengig av oppløsningen og skjermorienteringen til enheten som nettstedet vises på. Dessuten er alle endringer gjort for å gjøre det enklere å bruke et slikt nettsted på mobile enheter.

Adaptiv layout lar deg se nettstedet like praktisk, ikke bare på en dataskjerm, men også på skjermen til en mobiltelefon (smarttelefon) uten tap av funksjonalitet.

Mediespørringer for adaptiv layout

For å endre utformingen av nettstedet og den tilsvarende stilen, brukes mediespørringer som aktiverer en eller annen kode avhengig av bredden på skjermen. For at mediespørringer skal fungere og malen skal være adaptiv, må du plassere følgende kodelinje i HEAD-delen av nettstedets overskrift:

Grunnleggende prinsipper for tilpasningsevne

Siden skjermstørrelsen på mobile enheter (smarttelefoner, nettbrett) er merkbart mindre enn skjermen på en dataskjerm, både i størrelse og oppløsning. Hovedoppgaven til adaptiv design er å redusere bredden på en nettside for mobile besøkende.

Og dette oppnås på to måter:

Slette (skjule) blokker og/eller omfordele dem mellom seg;

Endre blokkstørrelser avhengig av skjermbredde.

Et klassisk eksempel er å flytte sidefeltkolonnen under hovedinnholdet.

Samtidig ble bredden på sidefeltet lik bredden på hovedinnholdet, og begge strakte seg på sin side over hele skjermens bredde.

Hvordan fjerne en sidefeltblokk avhengig av skjermbredde

La meg starte med det faktum at markeringen av de fleste moderne maler implementeres ved hjelp av blokker. For horisontal plassering brukes såkalte flyteblokker, det vil si med FLOAT-stilen. Følgelig, for å avbryte det horisontale arrangementet av blokker når du ser på mobile enheter, må du fjerne den flytende blokkstilen.

I det enkleste tilfellet vil CSS-koden se slik ut:

@media only-skjerm og (max-width: 1199px) ( .content(float: none;) .sidebar(float: none;) )

Den bør plasseres på slutten av stilfilen, i det minste etter at den har blitt formatert for visning på stasjonære datamaskiner.

Forklaringer til koden: i første linje sier vi at følgende stiler vil gjelde for enheter med en skjermbredde opp til og med 1199 piksler. For slike enheter slutter sidefeltet å være en flytende blokk og vises i rekkefølgen i nettstedets HTML-kode. Derfor, hvis du vil at sidefeltet skal vises etter innholdet, trenger du at sidefeltkoden er under hovedinnholdskoden, slik:

... ...

Automatisk blokkbredde - gummioppsett

Du bør også jobbe med bredden på innholdsblokkene og sidefeltet. Det er nødvendig å gjøre dem "gummi" når du ser på mobilklienter:

@media only-skjerm og (maks-bredde: 1199px) ( .content (width:100%;).sidebar (width:100%;) )

Med stilene ovenfor vil blokkene strekke seg over hele bredden av skjermen.

Adaptive bilder for nettstedet

Etter at vi har endret plassering og størrelse på blokkene, bør vi ta vare på de resterende elementene på stedet. Tross alt kan det hende at mange av dem rett og slett ikke får plass på skjermen, for eksempel bilder. For å tilpasse dem til mobilklienter bruker vi følgende kode:

Img (maks-bredde:100 %; høyde: auto;)

Problemet med lange ord

Noen ganger kan et horisontalt rullefelt vises fra et veldig langt ord når det ikke får plass på skjermen. Dette kan for eksempel være en URL som er igjen i en kommentar. Jeg skrev mer om dette problemet og dets løsning tidligere:. CSS-koden for å fikse responsproblemer vil se slik ut:

Bindestrek ( overflow-wrap: break-word; word-wrap: break-word; -webkit-bindestrek: auto; -ms-bindestrek: auto; -moz-bindestrek: auto; bindestrek: auto;)

Adaptiv nettsidemeny

Det er også tilrådelig å tilpasse nettstedmenyen, spesielt hvis den har mange elementer, siden den kan oppta en betydelig del av skjermen. For å frigjøre skjermen mest mulig for menyinnhold, skjuler de vanligvis menyen og viser i stedet en knapp (lenke), når du klikker, vil menyen vises på skjermen.

For å implementere planen din må du lage to gjensidig utelukkende objekter. For eksempel skal hovedmenyen være skjult på mobilskjermer, men det skal dukke opp en knapp som åpner denne menyen. På dataskjermer er det omvendt: hovedmenyen skal være synlig, men knappen for å kalle den skjult.

Dette er veldig enkelt å implementere i CSS.

#hovedmeny (skjerm:blokk;) #mobilmeny(skjerm:ingen;) @bare mediaskjerm og (maks-bredde: 1199px) ( #hovedmeny (skjerm:ingen;) #mobilmeny(skjerm:blokk;) )

Så snart skjermbredden blir mindre enn 1200 piksler, vil hovedmenyen forsvinne fra skjermen, og en lenke for å åpne den vil vises (mer presist vil en blokk med en lenke eller knapp vises).

Vær oppmerksom på at i dette tilfellet brukes blokk-ID-ene, ikke stilklassen. Og hovedmenykoden vil se omtrent slik ut:

<div id="mainmenu">Hovedmeny for nettstedet

For å vise hovedmenyen når du klikker på en knapp, legg til et lite skript i HEAD-delen:

function showmobilemenu() ( if (document.getElementById("mainmenu").style.display == "blokk") (document.getElementById("mainmenu").style.display = "ingen") else (document.getElementById(" hovedmeny").style.display = "blokk") )

Fra forfatteren: i fremtiden forventes en konstant økning i mobiltrafikk i internettverdenen. Dette betyr at du nå må kunne lage oppsett slik at prosjektet ser bra ut på alle enheter. Løsningen er for lengst funnet - adaptiv nettsidelayout! Vi skal snakke om henne.

2 måter å glede mobilbrukere

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

I hovedsak er det to løsninger på dette problemet. Den første er å lage forskjellige versjoner av oppsettet (for PC-er, for nettbrett og for mobiltelefoner). Dette er nøyaktig hva som ble gjort, for eksempel på det sosiale nettverket Vkontakte. Det andre alternativet er å lage adaptiv layout. Et slikt nettsted vil reagere på endringer i vindusbredden. Dette alternativet brukes stadig oftere i dag.

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

Tilpasningsevne er begynnelsen på reisen

Adaptiv layout er ikke forskjellig fra vanlig layout, bortsett fra at mediespørringer legges til stilarket, der stiler er spesifisert for forskjellige skjermbredder. Noen ganger er de plassert i en egen css-fil, og noen ganger er de skrevet på slutten av hovedstilarket. Eksempel mediesøk:

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

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

La oss se nærmere på denne oppføringen.

@media – selve betegnelsen på medieforespørselen

Skjerm – vi angir at dette refererer til skjermen (her kan du også spesifisere en TV eller 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 er forholdene her maks-bredde, min-bredde, maks-enhetsbredde, min-enhetsbredde. De to siste betyr at reglene kun vil fungere på selve mobilenhetene (det vil si at når du endrer vindusbredden på en datamaskin, vil det vises en horisontal rulling). Du kan også angi maks-høyde, men denne brukes svært sjelden.

() – alle CSS-reglene er skrevet i disse krøllete klammeparentesene. Det kan være så mange av dem du vil. La meg gi deg et par eksempler for å gjøre det klart for deg:

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

@media only-skjerm og (maks - bredde: 980px) ( Velger (bakgrunn: svart) @media only-skjerm og (min - bredde: 600px) ( img (flyt: venstre)

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

Andre eksempel: hvis vindusbredden er mer enn 600 piksler, vil alle bildene bli trykket til venstre kant.

Har du allerede innsett det geniale med denne layoutmetoden? I hovedsak kan du ved hjelp av medieregler justere 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 regler for widescreen-skjermer.

Lær mer om tilpasningsevne

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

Hvis du trenger noe enklere bare for å få ting i gang, vil denne passe deg mye bedre. Den består av fem videoleksjoner som vil lede deg gjennom det grunnleggende. Kurset er veldig enkelt, informasjonen er valgt spesielt for nybegynnere. Samtidig vil du kunne se på flere praktiske eksempler, slik at du etter å ha studert det selv kan tilpasse en enkel layout.

Er det vanskelig å mestre adaptiv layout?

Da jeg først begynte å studere nettteknologi, visste jeg ikke engang hva adaptivt nettstedoppsett var. Det var ikke mulig å gjøre dette på egenhånd. Frykt er vår hovedfiende. Det viste seg at alt var ganske enkelt. Og nå, når jeg noen ganger ser på koden for adaptive maler, forstår jeg hvor lett tilpasningsevne noen ganger er å implementere.

Hvordan teste tilpasningsevne

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

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 ved endring.

Hvorfor adaptiv layout?

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

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