Bruk disse tipsene for å lage responsive layouter effektivt.
Tenk deg at du har gjort alt det harde arbeidet for å lage en virkelig kul layout. Men så, når du gjør nettleservinduet litt mindre, finner du noe som flyter over. Du kaster inn en mediespørring for å fikse problemet. Men når du endrer størrelsen på vinduet, legger du merke til at noe annet har gått i stykker.
Dette er noe de fleste CSS-utviklere vil oppleve på et tidspunkt. Men heldigvis har vi flere moderne CSS-løsninger som gjør det så mye enklere å bare utvikle ting og få dem til å fungere godt. Denne artikkelen utforsker 5 nyttige fremgangsmåter du bør huske på når du utvikler nettsteder. Disse tipsene vil hjelpe deg å unngå irriterende brudd i designet.
1. Begynn med et globalt stilark
Start alltid med global styling når du skriver CSS. Ikke bekymre deg for oppsettet. Angi i stedet generiske stiler som typografi, farger og bakgrunner. Tilbakestill marger, fjern understreker fra lenker, og så videre.
Etter at du er ferdig med den generelle stilen, kan du begynne å lage oppsettet og målrette mot individuelle elementer i oppsettet. I utgangspunktet, start fra toppen og gå deretter inn på elementene.
Følgende CSS-eksempel tilbakestiller margen på alle elementer til 0, definerer typografien og fargen til alle hovedoverskriftene, og legger til en konsistent marg for dem alle:
kropp,
h1,
h2,
h3,
s {
margin: 0;
}h1,
h2,
h3 {
farge: blå;
font-familie: "Verdana" sans serif;
font-vekt: 900;
linjehøyde: 1;
}
h2,
h3,
s {
marg-bunn: 1rem;
}
Nå som du har definert alle basisstilene, kan du bygge derfra. Du kan for eksempel legge til polstring i beholderelementet. Dette vil skyve innholdet bort fra kantene på nettleseren din. Deretter kan du søke en maks bredde til bilder, slik at de kan tilpasse seg bredden på beholderen. Poenget er å ta utgangspunkt i de generelle elementene før du målretter mot spesifikke elementer.
Nok en gang vil oppsettet være responsivt. Så når du endrer skjermstørrelsen, vil størrelsen på elementene endres tilsvarende. Som utvikler bør du være klar over disse CSS-tipsene og triksene da de kan ta produktiviteten din til et neste nivå.
2. Unngå faste størrelser
Når du begynner å tenke på oppsett, er det aller første du bør huske på å unngå faste størrelser. Faste størrelser refererer til egenskaper som bredde: 1000px, høyde: 200px, og så videre. Å sette en fast høyde eller bredde vil bare føre til problemer i det lange løp.
Bruk heller tilpassede høyder og bredder. En måte er å bruke min-høyde og min bredde i stedet for høyde og bredde. Anta for eksempel at du setter bredden på et element til 600px. Når du blir mindre enn 600 piksler, vil innholdet flyte over:
I stedet bør du endre eiendommen fra bredde til maks bredde. Med maks bredde, vil elementet få tillatelse til å krympe når nettleservinduet begrenses. Og hvis vinduet blir bredt, utvides teksten tilbake til sin opprinnelige lengde. Her er resultatet:
Dette er det samme for høyde. Anta for eksempel at du angir høyde av en overskrift til en fast verdi på 200 piksler.
Overskrift {
høyde: 200px;
vise: Nett;
stedsgjenstander: senter;
}
Dette sentrerer alt i headeren perfekt. Men når du begrenser nettleservinduet, vil innholdet til slutt strømme ut av beholderen. Og dette er fordi du setter en fast høyde på headeren.
Som regel, høyde og bredde er begge farlige egenskaper. Løsningen er å bruke den tilpassede høyden og bredden, dvs. min- og maks-høyde, og min- og maks bredde. I disse tilfellene, hvis nettleseren kommer inn i situasjoner der innholdet blir lengre, vil overskriften vokse for å tilpasse seg det.
Dette er en av de de vanligste CSS-feilene du bør unngå.
3. Husk at nettstedet ditt er responsivt som standard
Husk at nettstedet ditt er responsivt selv før du skriver en enkelt linje med CSS-kode. Denne tankegangen kan hjelpe deg å unngå å overkomplisere designprosessen. Oppsettet kommer til å fungere på massive skjermer og bittesmå skjermer. Det er kanskje ikke pent. Det kan til og med være vanskelig å lese på storskjermer. Men nettstedet tilpasser seg visningsporten uansett størrelse.
Selvfølgelig kan bildene flyte over, og teksten kan være for liten. Men du kommer ikke til å miste noe med standardoppsettet. Teksten din vil ikke bryte, og alle elementene vil være synlige på skjermen.
Å forstå og omfavne dette faktum kan virkelig hjelpe når du skriver CSS-koden din. Når du får problemer, vil du være sikker på at feilen stammer fra CSS-en du skrev. Dette gjør det lettere å finne problemet og fikse det.
Prøv å bruke mediesøk bare for å legge til kompleksitet. For eksempel når du vil at layouten skal ha tre kolonner på større skjermer. Hvis ikke, ikke bruk dem. For et dypdykk i mediespørsmål, les vår guide for medieforespørsler.
Her er ett scenario. Tenk deg at elementet med klassenavnet .dele har tre elementer i seg. Med følgende CSS vil en tre-kolonne layout bli opprettet:
.dele {
vise: bøye seg;
flex-retning: rad;
mellomrom: 2rem;
}
På mindre skjermer (40 em bred eller mindre), vil du at alt skal oppta en enkelt kolonne. Så du gjør dette:
@media(maks-bredde: 40 em) {
.dele {
vise: blokkere;
}
}
Her overstyrer du standardjusteringen (tre kolonner). Men medieforespørselen er unødvendig fordi nettleseren bruker display: blokk som standard. Så du trenger ikke å definere det eksplisitt.
Med det i tankene kan du refaktorere koden din til å bruke en enkelt mediespørring som bare gjelder store skjermer. Der bytter du til tre kolonner når skjermen er bredere enn 40 em:
@media(maks-bredde: 40 em) {
.dele {
vise: bøye seg;
flex-retning: rad;
mellomrom: 2rem;
}
}
På små skjermer stabler nettleseren alt i en enkelt kolonne. Men du trenger ikke å spesifisere det fordi nettleseren bruker display: blokk som standard. Dermed har du bare brukt mediespørringer for å legge til kompleksitet.
Så i stedet for å legge til kompleksiteten og deretter måtte overstyre en haug med egenskaper, legger du nå til kompleksiteten når du trengte det. Mesteparten av tiden trenger du bare min bredde medieforespørsler. Start med mobil først, og når siden ser bra ut på mobil, legger du til kompleksiteten (f.eks. kolonner) for skrivebordsversjonen.
5. Dra nytte av moderne CSS
Ved å bruke moderne CSS-tilnærminger kan du komme vekk fra de fleste justeringsproblemer og bruddpunkter og gå mot å oppnå egendesign.
En måte du kan gjøre det på er:
h1 {font-size: clamp (3rem, 1rem + 10vw, 7rem)}
Dette klemmer h1 mellom minimum og maksimum skriftstørrelse. Det minste vi vil at det skal gå til er 3 rem og den høyeste er 7 rem. Midten er det vi skal iterere over (1rem + 10 vw). Som et resultat vil tittelen automatisk krympe etter hvert som visningsporten blir mindre og vokse etter hvert som den blir større.
Lær mer om moderne CSS
CSS har utviklet seg mye gjennom årene. I dag har vi nyere og bedre tilnærminger for posisjonering av elementer i CSS. I denne artikkelen berørte vi noen av disse praksisene og fremhevet hvordan de kan hjelpe deg med å unngå vanlige designfeller. En av de beste måtene å lære moderne CSS på er via den praktiske tilnærmingen, for eksempel å bruke moderne CSS for å designe en HTML-tabell.
