• hjem
  •  > 
  • Verktøy
  •  > 
  • Adaptiv layout: hva det er og hvordan du bruker det. Responsiv kontra adaptiv design: som er bedre for brukeren

Adaptiv layout: hva det er og hvordan du bruker det. Responsiv kontra adaptiv design: som er bedre for brukeren

Hilsen, tilfeldige besøkende og faste lesere av bloggsiden!

Under eksistensen av dette nettstedet endret jeg malen flere ganger og laget til og med min egen fra bunnen av.
En av hovedoppgavene når du velger en ny mal, er den adaptive layouten til nettstedet for alle skjermoppløsninger.

Kort oversikt over artikkelen:

I en tidligere artikkel skrev jeg allerede om hvorfor det er nødvendig. Men hvordan oppnå denne tilpasningsevnen?

For dette er det forskjellige måter. Noen bruker javascript, noen bruker noe annet. Men jeg tror at den enkleste og Den riktige måten er en adaptiv bruker CSS.

Hvordan lage et responsivt nettstedoppsett


For det første, hvis du begynte å gjøre opp adaptiv design nettsted, mellom tagger lim inn følgende kode:

For en tosk jeg var at jeg ikke gjorde dette med en gang da jeg prøvde å lage et tilpasset nettstedoppsett!!!
Problemet med mobilnettlesere er deres skalering av nettstedslayout, selv adaptive.

Tenk deg, jeg tegner et design, og skriver så ned alt nødvendige stiler og forespørsler, sjekker jeg nettstedets tilpasningsevne når forskjellige oppløsninger. Alt ser ut til å være bra! Men når jeg åpner bloggen min på smarttelefonen, ser jeg at siden rett og slett har krympet. Den tilpasset seg ikke mobilenheten, men reduserte rett og slett størrelsen på skrift, bilder osv.

Hvordan det? Jeg begynte å dobbeltsjekke alle stilene for å se om jeg hadde skrevet klassene riktig, og kom til slutt til det punktet hvor jeg sjekket bredden på nettleservinduet i px ved hjelp av javascript. Jeg var sjokkert. Når jeg sjekket på en bærbar PC, fikk jeg et resultat på 1024px, og jeg fikk omtrent det samme resultatet når jeg åpnet siden på en smarttelefon!

Men dette kan ikke være!

Viser seg, hvis du ikke skriver koden som jeg indikerte ovenfor, mobil nettleser forstår ikke at siden er responsiv og prøver rett og slett å gjøre nettsiden mindre slik at den passer inn i en liten mobiltelefonskjerm.

På grunn av min dumhet og inkompetanse mistet jeg mye tid. Men nå husker jeg det for alltid))).

CSS-mediespørringer med adaptiv layout


For å gjøre det responsivt med CSS, må du bruke mediespørringer.

Hvordan er det? Ja, veldig enkelt. I CSS-filen må du skrive spørsmål som:

@medieskjerm og (min-bredde: 1440px) og (maks-bredde: 1599px)( )

Denne koden betyr at stiler innelukket mellom "( )" vil fungere for skjermer med en minimumsbredde på 1440px og maksimalt 1599px.

Det vil si at stilene til sideelementer som må tilpasses avhengig av skjermoppløsning, må skrives separat for hver mulig skjermbredde.

De viktigste skjermoppløsningene for adaptiv layout

  • 320 piksler- Mobile enheter (stående retning);
  • 480 piksler- Mobile enheter (liggende orientering);
  • 600 piksler- Små tabletter;
  • 768 piksler- Nettbrett (portrettretning);
  • 1024 piksler- Nettbrett (liggende retning)/nettbøker;
  • 1280 px eller mer- PC.

Det er disse oppløsningene du må fokusere på og være spesielt oppmerksom på når du lager adaptive layouter. Dette er de vanligste typene skjermoppløsninger.

bootstrap responsiv design


Veldig praktisk å bruke for å lage adaptive bootstrap layout. Det praktiske er at alle stiler for tilpasning av blokker, knapper, tabeller, etc. er allerede registrert i bootstpap. Du trenger bare å finne ut hvilken klasse du skal tilordne til hvilket element.

For å komme i gang, last ned den nyeste versjonen av bootstrap og koble den til nettstedet ditt. Vær oppmerksom på at det å koble stiler og skript til WordPress har sine egne egenskaper.

Oppsettet på bootstrap er forskjellig ved at bredden på blokken eller skjermen er delt med 12 like deler. Og ved å tilordne en bestemt klasse til en blokk, kan du sette bredden på blokken lik det nødvendige antallet deler.

For eksempel vil denne utformingen tillate deg å tildele en bred blokk for innhold 8 deler bredt og en smal blokk for en sidefelt 4 deler bred:

Bredden på blokkene vil bli beregnet automatisk avhengig av bredden på skjermen. Og når de vises på en mobilenhet, vil disse blokkene forskyves under hverandre.

Du kan også justere avstanden til blokken fra kanten, igjen, til ønsket antall deler. For eksempel dette designet:

En blokk 10 deler bred vil bli laget med et venstre innrykk på 1 del av skjermen.

Hvis du ser på det, gjør arbeidet med bootstrap arbeidet veldig raskt. Dessuten fungerer disse stilene definitivt riktig, og det vil ikke være noe skjevt på nettstedet.

I fremtiden planlegger jeg å legge ut flere leksjoner om arbeid med bootsrap. Derfor anbefaler jeg deg å ikke gå glipp av dette øyeblikket.

Sjekker nettsidens tilpasningsevne


Men spørsmålet oppstår: hvordan kan man sjekke nettstedets tilpasningsevne? Nå har du skrevet mediespørringer i CSS, koblet til bootstrap og brukt de nødvendige klassene. Hvordan kan du sjekke at siden tilpasser seg riktig ved alle skjermoppløsninger?

Veldig nøyaktig og viktigst av alt gratis tjeneste, som fortjener respekt og takknemlighet fra webansvarlige og layoutdesignere som arbeider med tilpasset nettstedoppsett.

Vel, hvordan liker du artikkelen? Alt klart? Hvis ikke, skriv i kommentarfeltet, så finner vi ut av det sammen.

Ja, for å lage et responsivt nettsteddesign, må du jobbe hardt. Men denne innsatsen vil bli belønnet med en gunstig holdning til nettstedet ditt fra søkemotorer, og viktigst av alt, besøkende til nettstedet ditt.

Å lage en responsiv nettsidemal er enkelt nok, men å holde elementene balansert på alle punkter gjennom malen er en ekte kunst. I denne leksjonen Presenterer 5 metoder for bruk i CSS for en responsiv mal. Det er veldig enkle CSS-egenskaper slik som min-bredde , maks-bredde , overløp og relative verdier, men de spiller alle viktig rolle i utviklingen av adaptive design.

1. Adaptiv video

Dette CSS-trikset lar den innebygde videoen strekke seg til de angitte grensene.

Video (posisjon: relativ; polstring-bunn: 56,25 %; høyde: 0; overløp: skjult; ) .video iframe, .video-objekt, .video embed (posisjon: absolutt; topp: 0; venstre: 0; bredde: 100 % ; høyde: 100 %;)

2. Minimum og maksimum bredde

Egenskapen max-width lar deg angi maksimal bredde på et element. Den skal brukes for å forhindre at et element utvider seg utenfor en bestemt ramme.

Container med maks-bredde egenskap

Eksemplet nedenfor definerer beholderstørrelsen som 800 piksler, men setter størrelsesgrensen til 90 %.

Beholder (bredde: 800 piksler; maks bredde: 90 %; )

Adaptivt bilde

Du kan endre størrelsen på et bilde automatisk til maksimal størrelse ved å bruke egenskapene max-width:100% og height:auto.

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

Koden ovenfor er for adaptivt bilde fungerer i IE7 og IE9, men fungerer ikke i IE8. For å rette opp situasjonen må du legge til egenskapen width:auto. Du kan bruke betinget CSS-regel spesifikt for IE8 eller lavere gitt triks for IE:

@media \0skjerm ( img ( width: auto; /* for dvs. 8 */ ) )

min-bredde eiendom

Egenskapen min-bredde er det motsatte av egenskapen maks-bredde. Den setter minimum mulig bredde på elementet. Nedenfor er et eksempel på bruk av min-width-egenskapen for å forhindre at inndatafeltet blir for lite når det zoomes ut.

3. Relative verdier

I adaptiv mal bruk relative verdier kan betydelig forenkle CSS-koden og forbedre utseende design.

Relative felt

Nedenfor er et eksempel på kommentarer som bruker den relative bredden på venstre marg for å lage innrykk i en trestruktur. I stedet for en absolutt verdi i px, brukes en prosentverdi for neste nivå på listen. På venstre side av figuren kan du se at på mobile enheter kan det hende at den tilgjengelige plassen for listeelementer ikke er nok for normal visning hvis absolutte verdier brukes.

Relativ skriftstørrelse

Ved å bruke relative verdier for skriftstørrelse (em eller %) kan du enkelt oppnå passende endringer i linjehøyde og innrykkstørrelser når du tilpasser malen til enhetens skjermstørrelse. For eksempel endres størrelsen på alle relaterte elementer automatisk når du angir nye skriftstørrelser for det overordnede elementet.

Relativ polstring

Figuren nedenfor viser fordelene ved å bruke en relativ %-verdi for polstring. Blokken til venstre har ubalansert plass ved bruk av absolutte px-verdier. Blokken til høyre har Flott utsikt med proporsjonal fylling av innhold.

4. Triks med overflow:hidden-egenskapen

Du kan avbryte tekstbryting rundt et element ved å bruke overløpsegenskaper. Veldig enkelt og nyttig måte. Du kan pakke ut tekst rundt det forrige elementet og opprettholde strukturen til innholdet.

Maks-bredde-egenskapen hjelper til med å plassere uknuselig tekst (som for eksempel lang URL-adresse) i flere linjer i stedet for én.

Break-word ( ord-wrap: break-word;)

Fra forfatteren: responsivt nettsteddesign er absolutt ny tilnærming design får mer og mer oppmerksomhet, men gitt hvor forskjellig det er fra tradisjonelle utviklingsmetoder, kan det i utgangspunktet virke uoverkommelig vanskelig for nye webdesignere og utviklere. I denne artikkelen skal jeg dekke noen de viktigste punktene knyttet til utvikling og implementering Responsivt webdesign og gjør livet ditt, venner, litt enklere.

Den klassiske tilnærmingen til å lage et nettsted ser omtrent slik ut: en utviklingsblokk, en webdesignblokk, en layoutblokk, osv. Men i løpet av de siste årene har alt begynt å endre seg dramatisk: begrepet "webdesign" blir gradvis forsvinner, mens «adaptiv design» på snikende vis styrker sin posisjon, og gradvis gjør skift i bevisstheten til spesialister.

I det store og hele skal ikke webdesign oppfattes så entydig, og den raske utviklingen av adaptiv design, som nærmest anses som en industriell standard, har medført en hel karusell av ulike verktøy og plattformer.

Konseptet om tilpasningsevne

"Hva er responsiv design og hva tilpasser den seg til?" - kan en uvitende spørre. Jeg vil svare deg: til typen enhet som brukes. Responsivt design sikrer god visning av nettsider på ulike dingser koblet til Internett.

Den samme nettsiden skal se bra ut på bærbare datamaskiner, smarttelefoner, nettbrett osv., uavhengig av skjermformat og oppløsning som brukes. Samtidig skal det være like praktisk for brukere å se nettsider for alle formater, uten for eksempel å måtte utvide individuelle blokker for ikke å gå glipp av ønsket knapp.

På grunn av det faktum at hvert adaptivt prosjekt er individuelt og iterativt, er det ganske vanskelig å analysere alle prosessene for å gi løsninger for alle situasjoner og forbedre arbeidseffektiviteten. Imidlertid er det generelle vellykkede strategier og teknikker for å implementere, forbedre og lage responsivt nettsteddesign som kan brukes i nesten alle situasjoner.

Mobile First-strategi

Denne utviklingsstrategien ble foreslått tilbake i 2009 av Luke Wroblewski, forfatter av bøker og artikler om webdesign, leder for sosialt nettverk Bagcheck, som ble kjøpt opp bare 9 måneder etter opprettelsen Twitter-selskap Inc.

Luke Wroblewskis tilnærming til utvikling kalles "Mobile First" av tre grunner:

det mobile miljøet lar deg fokusere og bli kvitt rotet som oppstår på grunn av å "rote" en stor mengde plass på skjermen;

Mobilmarkedet har en tendens til å utvikle seg i et forrykende tempo;

Mobilmiljøet er forbundet med mange muligheter (kamera, multi-touch-bevegelser, GPS, akselerometer, geolokalisering).

Siden den gang har webdesign stadig endret seg mot denne tilnærmingen. Mange webdesignere og webutviklere tenker først på hvordan man lager et responsivt design mobilversjon nettstedet, og deretter engasjere seg i skrivebordsutvikling.

"Mobile First"-strategien starter med å lage strukturen og innholdet til en mobilversjon som fungerer i lavhastighets internettmiljøer og beveger seg mot større bruddpunkter med raskere tilkoblinger, samtidig som lite-versjonene forbedres og optimaliseres.

Moderne tendenser og tilnærminger innen webutvikling

Lær algoritmen for rask vekst fra bunnen av i nettstedbygging

Dette sikrer innovative og effektivt arbeid alle typer enheter. Nettstedsutviklere fokuserer på brukernes behov, lager optimaliserte og høyhastighetssider, ta hensyn til viktig innhold. Forresten, til og med Google bruker «Mobile First»-tilnærmingen.

Innholdsstrategi «Innhold ut»

Målet med å lage responsiv design er å gi den beste brukervennligheten i enhver sammenheng. Dette flott anledning for å analysere innholdet, gjøre det lett tilgjengelig og lesbart på alle typer enheter.

Mange som ikke bruker en Mobile First-strategi foretrekker en Content First-strategi. Dette er selvfølgelig det riktige å gjøre, men du skal ikke ta denne oppfordringen bokstavelig og tenke at du ikke skal begynne å utvikle et design før alt innholdet er klart.

Innhold bør kontinuerlig opprettes og diskuteres både på stadiet for å lage et responsivt nettsteddesign og etter at det er ferdig! Som den anerkjente designeren Cennydd Bowles sa, "design og innhold bør gå hånd i hånd." De må utfylle hverandre.

Strategien "Innholdsstruktur først" er en helt annen sak. Først av alt må du være tydelig på nettstedets oppdrag, hva det prøver å fortelle verden. Og først da nøye vurdere strukturen av innholdet, fremgangsmåter for skapelse, typer og formål med hvert element, mens brukeren bør settes i forkant.

Du må ha en strategi på plass som sikrer at du gir alle brukere nødvendig innhold på hvert trinn av sin reise på ressursen din. Nettstedets struktur bør være basert på forskning på din atferd og behov. målgruppe.

Hvis på innledende stadier Når du utvikler en nettside strukturerer du innholdet godt, i fremtiden kan du enkelt overføre det til andre plattformer og enheter. Selvfølgelig ville det ikke skade å ha et eksempel på responsiv design som referanse for deg.

Ta deg tid til å skissere og prototype

Å bestemme hvilke oppløsninger du skal lage responsiv design for, bør starte med å lage en organisert layout - skisser, som vil være lett å skalere i fremtiden.

Variasjonen av enheter med deres evner, oppløsninger og skjermstørrelser betyr et stort nummer av oppsett. Å lage en skisse vil legge grunnlaget for en fremtidig prototype av prosjektet. Med dens hjelp kan du ta opp ulike ideer for diskusjon, lage grove skisser som vil danne grunnlaget for nettstedets rammeverk.

Når skissen er klar, kan du gå videre til å lage en fungerende utkastversjon av nettstedet eller HTML-malen. Denne prosessen kalles prototyping, og den innebærer minimalt med visuell design for å forbedre interaksjon og funksjonalitet.

Denne strategien vil hjelpe deg å revurdere hele tilnærmingen din til å lage responsiv design. I stedet for å utvikle "mobilsider" og "nettsteder", vil du nå fokusere på å utvikle fleksible systemer med et sett med regler som bestemmer hvordan innhold leveres og leveres basert på kontekst.

Håp, denne artikkelen var nyttig for både erfarne og nybegynnere webdesignere.

Og til slutt, de tradisjonelle avskjedsordene: gjør nettstedet nyttig, praktisk og kjent, uavhengig av enheten det vises på. Vi sees igjen, venner!

P.S.: har du allerede abonnert på bloggoppdateringene våre?

Moderne trender og tilnærminger innen webutvikling

Lær algoritmen for rask vekst fra bunnen av i nettstedbygging

Begreper som responsiv og adaptiv design brukes i I det siste ofte nok. Som det viser seg, for noen mennesker er disse to konseptene nesten identiske. I denne artikkelen vil vi snakke om hva responsiv og adaptiv design er og hva forskjellen er mellom dem.

Starter fra øyeblikket nettbrett og smarttelefoner har blitt tilgjengelig for allmennheten, blir nettsteder i økende grad sett på ved hjelp av berøringskontrollerte enheter, små skjermer. Mange Internett-ressurser viste seg å være helt uegnet for bruk av eierne av slike enheter.
To fundamentalt forskjellige tilnærminger til å lage nettsteder for mobile enheter har dukket opp: Adaptiv webdesign og responsiv webdesign. La oss se på hver av dem separat, og deretter sammenligne applikasjonene og funksjonene deres.

Hva er responsiv design

Responsivt webdesign (RWD) er en tilnærming til å lage et design der et nettsted er designet for å sikre den enkleste bruken: praktisk visning av nettstedet med et minimum av endringer og unødvendig rulling - på det bredeste utvalget av enheter. Responsiv design har følgende funksjoner:

  • Responsiv design bruker utelukkende HTML og CSS, uten å inkludere JavaScript for å bestemme "responsiviteten" til designelementer.
  • Responsiv layout bestemmer hvordan nettstedelementer vil se ut forskjellige enheter; disse elementene er imidlertid ikke skjult/erstattet av andre, og deres oppførsel, så vel som funksjonene de utfører, endres ikke.
  • Tre kjerneprinsipper for responsiv design:
    1. arrangement av alle elementer i det modulære rutenettet;
    2. alle layoutelementer og mediefiler (inkludert bilder) er "fleksible" - størrelsene deres avhenger av skjermstørrelsen;
    3. arbeider med mediespørringer - en CSS3-modul som lar deg spesifisere forskjellige stiler(eller til og med stilark) avhengig av skjermoppløsning, skjermstørrelse og andre egenskaper.
  • Responsiv design lages ved hjelp av responsiv markup (må ikke forveksles med responsiv design). Adaptiv layout er at flere stiler er opprettet på nettstedet, alternativer for arrangement av elementer på modulært rutenett og flere designelementstiler. Disse alternativene erstatter hverandre etter hvert som skjermstørrelsen endres, og visse overgangspunkter dannes mellom forskjellige typer sideoppsett/stiler.
  • Responsivt design innebærer ikke å jobbe med objektmodell elementer på siden innebærer ikke en endring i hierarkiet/nesting av blokker og objekter når typen markering endres.

Hva er responsiv design

Adaptiv webdesign (AWD) er et design som manipulerer forskjellige nettstedsoppsett eller oppsett for å sikre best mulig bruk på spesifikke, forhåndsbestemte enheter og skjermoppløsninger.

  • Når det gjelder adaptiv design, kan nettstedselementer skjules og erstattes med andre; Atferden og funksjonaliteten til individuelle nettstedselementer kan endres.
  • Responsiv design bruker utstrakt bruk av JavaScript for å kontrollere atferden og funksjonaliteten til objekter på et nettsted.
  • Adaptiv design krever arbeid med objektmodellen til elementene på siden og innebærer å endre hierarkiet/nesting på forskjellige enheter.
  • Det er ikke obligatorisk å sikre samme utseende på nettstedet og dets funksjonalitet i forskjellige nettlesere. Det er mulig å bruke nye teknologier som ikke støttes av eldre versjoner av programmer – fordi designet, som nevnt ovenfor, er tilpasset visse typer enheter.

Definisjon Forvirring

I RuNet er konseptene responsiv og adaptiv design nesten identiske med hverandre. Det er verdt å forstå at disse tilnærmingene er forskjellige først og fremst i oppgavene de brukes til.

Responsiv markup og responsiv design er helt forskjellige ting. Adaptiv nettstedslayout innebærer å endre stilene til elementer på forskjellige enheter og brukes i responsiv design. Adaptiv design er egen tilnærming til design og oppretting av front-end nettsteder.

Funksjoner ved tilnærmingene

Noen viktige aspekter, når det gjelder hvilke responsive og adaptive design som er radikalt forskjellige:
Nettstedets hastighet. Et nettsted opprettet i henhold til prinsippene for adaptiv design kan lastes flere ganger raskere, siden brukeren trenger å laste ned fra serveren bare de delene av designet som er nødvendige for at nettstedet skal fungere på enheten hans. Ved responsiv design vil brukeren bli tvunget til å vente til alle stiler og bilder er lastet inn, uavhengig av hvilken enhet den besøkende bruker.
Utviklingens kompleksitet.Å lage en nettside med adaptiv design krever et høyere faglig nivå fra utvikleren. Spesielt solid erfaring med JavaScript.
SEO aspekt. Ryktene sier at Google aksepterer responsive nettsteder mye mer enn adaptive.

På praksis

I praksis Responsive, responsiv utforming, forekommer ganske ofte, i motsetning til adaptiv. Noe som er åpenbart: den første er tross alt enklere å implementere og mestre. De fleste maler som selges på markedsplasser er responsive, ikke adaptive.
Adaptiv design brukes oftere i seriøse og multifunksjonelle produkter. De mest åpenbare eksemplene: i mobilversjonen av VKontakte-nettverket, e-post fra Google.

P.S. Hvis du legger merke til, vil du legge merke til at utformingen av nettstedet vårt er et eksempel på responsiv design. For å bekrefte dette, prøv å endre bredden på nettleservinduet på datamaskinen din - og du vil legge merke til hvordan nettstedets layoutstil gradvis forvandles til en mobilvisning.

Tilstedeværelsen av adaptiv design er en nødvendighet - livet har bevist dette med sin rake; ingen mobil Joomla gir en slik effekt som direkte nettstedtilpasning. I dag skal jeg fortelle deg hvordan du lager et responsivt design gjennom redigering CSS-stiler ved hjelp av hodet og fingrene. Det vil ikke være mulig å sette alt i detalj, siden hver mal har nyanser, men jeg vil gi en impuls til å begynne å tilpasse.

Tilpasning for skrivebord

Først tilpasser vi den til skrivebordet. Dette er den grunnleggende scenen, hvorfra dansen med en tamburin begynner. Mange mennesker feilaktig oppfatter verden, og tenker at med visningen av et nettsted på vanlige datamaskiner de har ingen problemer, siden noen har designet malen, og den ser jevn ut ved normal oppløsning. Avhengig av oppløsningen på skjermen din, ja, men hva med større skjerm, hvordan ser du ut med absolutt og piksler på en skjerm med en oppløsning på 1920x1080? Hensikten med å tilpasse designet er å vise siden normalt på mobile enheter og unngå eventuelle problemer på store skjermer.

Hva gjør vi? Det viktigste er å konvertere alle store verdier til mal css fra piksler (px) til prosenter (%). Det er flere regler her:

  1. - Vi endrer px med % bare for store verdier, det er ikke nødvendig å endre 5 px med 1 % (for eksempel),
  2. - Gjør alt arbeid gjennom Firebug, og overfør deretter verdiene til det virkelige liv.

Litt for felles forståelse. Du har et nettsted der sidebredden er 1000 px, den har tre blokker - en sentral 800 px og to sidefelter på 100 px. Dette betyr at etter å ha erstattet med prosenter, vil sidestørrelsen bli 100 %, den sentrale beholderen vil være 80 % og sideblokker 10 % hver. Grovt, men forståelig. Nå litt mer spesifikt.

Før tilpasning (jeg lagret den gamle for historien) CSS-fil) hovedbeholderen ble stilt slik:

#container(margin:0 auto;width:1100px; …

Etter tilpasning ble det slik:

#container(margin:0 auto;width:77%;overflow: skjult !viktig; …

Toppmenyen er endret fra:

Toppmeny>ul>li ul(bredde:155px; …

Toppmeny>ul>li ul(bredde:90%; …

Og forskyvningen av innholdsblokken er implementert med:

#content(margin:0 220px; …

#content(margin:0 20% …

Vær oppmerksom på koden:

overløp: skjult !viktig;

Vi bruker den til å fjerne horisontal rulling, dette er nyttig for mobiltilpasning, noen ganger er det fornuftig å bare spesifisere et forbud horisontal rulling ved bruk av:

overflow-x: skjult !viktig;

Utfør alt arbeid gjennom Firebug eller Google-inspektøren, sjekk med øynene - siden skal se lik ut etter konvertering av px til %. Du trenger ikke å klemme på skjermen ennå, vi har ikke kommet til mobiltilpasning ennå, vi har gjort det ennå grunnleggende arbeid for store skjermer.

CSS for mobile enheter

Databasen er opprettet, forresten, dette er det vanskeligste stadiet; nå må vi sørge for at siden vises riktig på alle mobile enheter. Det er få tidligere manipulasjoner, siden det ikke vil være mulig å komprimere alt til en prosentandel for en liten skjerm. Enig, det er umulig å se en 10% bred sidelinje på en smarttelefon med en oppløsning på 320 px.

Vi må bruke @media screen og som gjør stilendringer for enheter med en bestemt oppløsning. Jeg bestemte først ved å redusere nettleserskjermen med hvilken oppløsning jeg hadde skjermproblemer. Etter å ha begrenset skjermen, fant jeg "krumningspunktet", det starter med en bredde på 1000px, noe som betyr å skrive ned det viktigste mobile stiler herfra - alt som vil vises mer i stilene til et vanlig skrivebord, og mindre i separate stiler.

Eksempel @mediaskjerm og

Jeg har skrevet CSS under mobile enheter på Joomla mal 1.5 slik:

@media screen and (max-width:500px)(body, tbody(-moz-bindestrek:auto;-webkit-bindestrek:auto;-ms-bindestrek:auto;bindestrek:auto;)

@medieskjerm og (max-width:400px)(td(word-break:break-all;)

@medieskjerm og (max-width:1000px)(td(word-break:break-all;).sidetall, #footer, #navigation, #header,.logo,.nav-box (display: none !important ;) #content (posisjon: auto; bredde: 80%;margin-bottom: 0;margin-venstre: 10%;margin-right: 20%;) #container ( width: 90% !important;).content-box (bredde:110%).content-box h1 (font-size: 130%;).content-box h2 (font-size: 110%;).content-box h3 (font-size: 120%;).content -box h4 (font-size: 100%;) .top-menu>div (padding-right: 0px !important;) img(max-width:96% !important;height:auto !important;)

Noen detaljer om koden.

Når skjermbredden er mindre enn 1000 px, slutter sidefeltene, topptekst, paginering og bunntekst å vises. Etter min mening er de ikke nødvendig i mobilversjonen. Dette er hva koden gjør:

Sidetall, #bunntekst, #navigasjon, #header,.logo,.nav-boks (visning: ingen !viktig;).

Som standard, i mobil Joomla 3 og høyere, går sideblokkene ned, og strekker siden til det skamfulle, så selv på nye motorer kan du korrigere noen ting manuelt.

Andre verdier er også indikert for blokkene til hovedbeholderen og innholdsvinduet, og utdataene til H1-H4 konverteres til prosenter (piksler passer meg for skrivebordet). Det er gjort korrigeringer i utgangen. toppmenyen(Heldigvis må det minimeres, men dette er ikke kritisk, og jeg skal gjøre det senere) og visningen av bilder er endret:

img(maks-bredde:96 % !viktig;høyde:auto !viktig;).

For dem er det indikert at maksimal størrelse Bredden på bildene er 96 % (med fine innrykk), og høyden stilles inn automatisk.

Det konkrete er over, nok en gang generell forstand tilpasse siden (design) ved hjelp av CSS.

  1. - Endre store px-verdier til %,
  2. – Vi registrerer separat @mediaskjerm og for mobile enheter.

Via @media-skjermen og sørg for å lukke visningsblokkene som er unødvendige for mobil, men konverter til % de verdiene som vises feil, siden de ble igjen i piksler i skrivebordsversjonen av CSS.

Som et resultat var brukeropplevelsen når du jobbet med Joomla Mobile 65-70 %, med responsiv design ved bruk av CSS ble den 99 %. Konklusjonene er åpenbare: Yandex og Goole ble ikke testet for tilpasningsevne, men nå passerer de med et smell.