I lang tid prøvde jeg å nå en perfekt visuell sammensetning på nettsider. Jeg har hatt mye smerte med CSS-brytepunkter i mitt daglige arbeid og var aldri helt fornøyd med vanlige måter å håndtere den responsive layoutet. Nylig oppdaget jeg en veldig kul
Responsivt webdesign
Trick som gjør alt enkelt, konsekvent og logisk, og jeg er ivrig etter å dele den med deg.
Denne artikkelen handler hovedsakelig om kreativ utvikling, og det er derfor for både: Front End-utviklere som kan finne denne teknikken nyttige, og webdesignere som skal ha en generell forståelse av webproduksjon og hvordan man forbedrer sluttutgangen. Jeg antar at du allerede vet om CSS, breakpoints og media spørringer.
Bygg en blogg med rutenett og flexbox
Den tradisjonelle måten
Breakpoints kan føre til utilfredsstillende resultater for ikke-standardiserte visningsporter
Bærbare enheter tar over hele verden. En rekke alle typer enheter endrer måten vi lager nettsteder på. Med 'et responsivt nettsted' de fleste antar bare skrivebords- og mobilversjoner (noen ganger skrivebord, nettbrett, mobil). Slik fungerer det tradisjonelt:
Faktisk, vanligvis
Nettstedslayout
Vi ser ikke er laget for enheten vår. For eksempel, la oss se hvordan vi justerer skriftstørrelsen på
Med bare ett brytepunkt kan du ende opp med rare punktstørrelser
Du ser, vår & lt; h1 & gt; Tittel har "font-size: 48px" på 320px og 800px bredde enhet, og "Font-size: 80px" på 1024px og 2560px.
Selvfølgelig kan vi legge til flere breakpoints, men antall forskjellige enheter er utallige! Dette kommer til å lage designspesifikasjoner svært kompliserte og forvirrende, fordi det er vanskelig å vite hvilken verdi som brukes på hvilken skjerm.
Du kan aldri skape nok breakpoints for å få skriftstørrelsen perfekt på hver skjerm
Det vi virkelig trenger er dette:
Viewport-enheter
Viewport-enheter forbedrer saker, men de trenger fortsatt arbeid
Løsningen på dette problemet innebærer viewport enheter VW og VH. Disse er lengde enheter som representerer 1 / 100th av bredden / høyden på visningsporten (bredt støttet av nettlesere fra IE9 +).
Vi kan bruke disse til å justere egenskapene til en nettside i henhold til størrelsen. Situasjonen vil bli litt bedre, men smerten er fortsatt den samme:
Hvordan kan vi bygge et ekte adaptivt layout system? Hvordan designer vi et responsivt nettsted som fungerer nativt fra 320px til 2560px?
Ideelt sett bør din Mockup forklare logikken bak oppsettet, og hvordan det tilpasser seg en mindre oppløsning til større:
Løsningen
Slik gjør du et virkelig adaptivt layoutsystem
Vi vil kontinuerlig justere egenskapene fra en liten skjerm til en stor. Ingen breakpoints og ingen medieforespørsler. Det vi ønsker er en enkelt verdi som fungerer for hver skjerm.
En matematikkfunksjon med to variabler er nøkkelen. For eksempel, hvis vi vil justere en tittel skriftstørrelse, bør funksjonen se slik ut:
1920x + y = 80
375x + y = 48
1920 - Standard skrivebordsbredde i en design Mockup (er lik 100vw)
375 - Standard mobilbredde i en design Mockup (er lik 100vw)
80 - Ønsket H1 Tittel Font Størrelse på skrivebordet
48 - Ønsket H1 Tittel Font Størrelse på mobil
Dette er X- og Y-verdiene:
x = (80 - 48) / (1920 - 375)
x = 0,0207.
Y = 80 - 1920 * 0,0207
y = 40.256.
For å bruke disse verdiene trenger vi CCE CSS-funksjonen for å utføre beregninger på nettsiden (bredt støttet av nettlesere fra IE9 +). Vi bør telle x * 100 ganger (fordi 1VW-enhet = 1 / 100th of Viewport Width).
Vi tar vår opprinnelige funksjon:
1920x + y = 80
375x + y = 48
Erstatt 1920 med 100vw:
100vw * x + y = ønsket verdi
Erstatt X og Y med verdiene:
100vw * 0,0207 + 40,256 = Ønsket verdi
Vi får den endelige CSS-stilen:
H1 {font-size: Calc (2.07VW + 40.25px)}
Overraskende nok, det fungerer endelig akkurat hvordan vi ønsket!
Bare en eiendom for alle skjermer. Du trenger ikke å overskrive verdiene igjen og igjen. Du kan justere og beregne noen typer egenskaper: bredde, skriftstørrelse, polstring, margin, etc.
La oss prøve å bygge en faktisk layout ved hjelp av denne teknikken:
Men denne tilnærmingen har en ulempe: Det er vanskelig å forstå hvilken verdi som står bak denne kalkfunksjonen. Hvordan kan vi forenkle det?
Hvis du kodiger HTML daglig, er du sannsynligvis kjent med Sass / SCS-pre-prosessorer. Her er litt hjelp for deg: La oss lage en "mixin" og gjøre alle disse beregningene skje automatisk, og fortsatt holde våre opprinnelige verdier.
Det er den samme funksjonen som beskrevet ovenfor, men laget som en Sass Mixin:
Denne teknikken
Gir en svært sofistikert løsning for endelig å bygge virkelig responsive web-layouter. Den støtter de fleste nettleserne, sikrer at prosjektet ditt skal være riktig vist til en besøkende, forenkler stylene strukturen, og viktigst gjør weboppsettet ditt konsekvent og logisk. Jeg håper det kan hjelpe deg med å lansere noen forbløffende webprosjekter.
Jeg opprettet mitt originale maleri rundt denne tiden i fjor, etter å ha blitt inspirert av de store fantasy landskapene av artister som Dongbiao Lu og RUXING GAO. Det var mitt første stili..
Et bilde er verdt tusen ord, og en video er verdt en million. Videoen kan formidle mer informasjon raskere enn utskrift eller statisk bilder. Det kan gjøre ellers stående dokumenter engasje..
