În acest articol, vă voi învăța cât mai multe tehnici de proiectare receptive posibil în cinci minute. Evident, acest lucru nu este suficient pentru a-l învăța corect, dar vă va oferi o imagine de ansamblu asupra celor mai importante concepte, pe care eu personal le definesc ca fiind următoarele:

  • Unități CSS relative
  • Interogări media
  • Flexbox
  • Tipografie receptivă

Dacă doriți să vă scufundați mai adânc în subiect după aceea, puteți consulta pagina noastră bootcamp responsive pentru dezvoltatori web pe Scrimba, care vă va permite să creați site-uri web receptive la nivel profesional.

Dar, deocamdată, să începem cu elementele de bază!

Unități CSS relative

La baza designului web receptiv se află unități CSS relative. Acestea sunt unități care își obțin valoarea de la o altă valoare externă. Acest lucru este la îndemână, deoarece permite, de exemplu, lățimea unei imagini să se bazeze pe lățimea browserului.

Cele mai frecvente sunt:

ad-banner
  • %
  • em
  • rem
  • vw
  • vh

În acest articol, vom începe cu unitatea procentuală %, și apoi ne vom uita la rem unitate în secțiunea finală.

Să presupunem că aveți un site web foarte simplu, ca acesta:

Text alternativ

HTML-ul său este doar următorul:

<body>
    <h1>Welcome to my website</h1>
    <image src="https://www.freecodecamp.org/news/learn-responsive-web-design-in-5-minutes/path/to/img.png" class="myImg">
</body>

După cum puteți vedea din GIF de mai jos, imaginea noastră va avea în mod implicit o lățime fixă:

Text alternativ

Acest lucru nu este deosebit de receptiv, deci să schimbăm acest lucru la 70%. Pur și simplu vom face următoarele:

.myImg {
    width: 70%;
}

Aceasta setează lățimea imaginii la 70% din lățimea părintei sale, care este <body> etichetă. Dupa cum <body> eticheta se întinde pe întreaga lățime a ecranului, imaginea va fi întotdeauna 70% din ecranul în sine.

Iată rezultatul:

Text alternativ

Și atât de ușor este să creezi o imagine receptivă!

Utilizarea interogărilor media pentru a îmbunătăți experiența mobilă

Totuși, avem o problemă cu aspectul nostru receptiv, și anume faptul că arată ciudat pe ecrane foarte mici. Lățimea de 70% trebuie să se restrângă atunci când este vizualizată pe mobil. Aruncă o privire pentru tine:
(…)

Text alternativ

(…)
A face să arate mai bine în această situație este o sarcină perfectă pentru interogările media. Acestea vă permit să aplicați diferite stiluri pe baza, de exemplu, a lățimii ecranului. Practic putem spune dacă ecranul are o lățime mai mică de 768 px, utilizați un stil diferit.

Iată cum creăm o interogare media în CSS:

@media (max-width: 768px) {
    .myImage {
        width: 100%
    }
}

Acest bloc CSS se va aplica numai dacă lățimea ecranului este mai mică de 768 pixeli.

Iată rezultatul:

Text alternativ

După cum puteți vedea, pagina are un punct de întrerupere în care imaginea devine brusc mai largă. Atunci browserul are o lățime de 768 pixeli și imaginea se schimbă între ele 70% și 100%.

Utilizarea Flexbox pentru navbar

Următorul este Flexbox. Pur și simplu nu puteți afla despre capacitatea de reacție fără a afla despre Flexbox. A schimbat jocul de design receptiv când a fost introdus acum câțiva ani, deoarece face mult mai ușor să poziționați elementele în mod receptiv de-a lungul unei axe.

Pentru a utiliza Flexbox vom face site-ul nostru un pic mai complex prin adăugarea unei bare de navigare deasupra titlului. Iată codul HTML pentru asta:

<nav>
    <a href="https://www.freecodecamp.org/news/learn-responsive-web-design-in-5-minutes/#">Home</a>
    <a href="https://www.freecodecamp.org/news/learn-responsive-web-design-in-5-minutes/#">About me</a>
    <a href="https://www.freecodecamp.org/news/learn-responsive-web-design-in-5-minutes/#">Contact</a>
</nav>

În mod implicit, va arăta pur și simplu așa.
(…)

Text alternativ

(…)
Articolele noastre de navigație sunt strânse în partea stângă, ceea ce nu ne dorim. Vrem ca acestea să fie spațiate uniform pe toată pagina.

Pentru a realiza acest lucru, vom transforma pur și simplu containerul nav într-un flexbox și apoi vom folosi magicul justify-content proprietate.

nav {
    display: flex;
    justify-content: space-around;
}

display: flex întoarce <nav> într-o cutie flexibilă și justify-content: space-around spune browserului că articolele din interiorul cutiei flexibile ar trebui să aibă spațiu în jurul lor. Deci, browserul distribuie tot spațiul rămas în mod egal în jurul celor trei elemente.

Iată cum arată. Și, după cum veți observa, se potrivește frumos:

Text alternativ

(…)

Tipografie receptivă: rem

Ultimul pas este să facem și tipografia noastră receptivă. Vedeți, vreau ca bara de navigare și titlul să se micșoreze puțin atunci când ecranul are o lățime mai mică de 768 pixeli (punctul nostru de întrerupere a interogării media, vă amintiți?).

O modalitate de a face acest lucru ar fi reducerea tuturor dimensiunilor fontului în interogarea media, astfel:

@media (max-width: 768px) {
    nav {
        font-size: 14px;
    }
    h1 {
        font-size: 28px;
    }
}

Totuși, acest lucru nu este ideal. S-ar putea să ajungem la mai multe puncte de întrerupere în aplicație și să avem și elemente multiple (h2, h3, paragrafe etc.). Ca urmare, va trebui să ținem evidența tuturor elementelor din toate punctele de întrerupere diferite. Va fi o mizerie!

Cu toate acestea, cel mai probabil, se vor relaționa unul cu celălalt mai mult sau mai puțin în același mod pe parcursul diferitelor puncte de întrerupere. De exemplu, h1 va fi întotdeauna mai mare decât paragraph.

Deci, dacă ar exista o modalitate prin care aș putea ajusta un factor și apoi să fac restul dimensiunilor fontului să se scale în raport cu acel factor?

Introduceți rems!

A rem este în esență aceasta: valoarea dimensiunii fontului pe care ați setat-o ​​pentru dvs. <html> element. Îmi place acest lucru:

html {
    font-size: 14px;
}

Deci, în acest document, unul rem este egal cu 14 px.

Asta înseamnă că putem seta toate dimensiunile fonturilor noastre pe site-ul nostru web rem unități, ca aceasta:

h1 {
    font-size: 2rem;
}

nav {
    font-size: 1rem;
}

Și apoi vom schimba pur și simplu valoarea dimensiunii fontului pentru <html> etichetați în interogarea noastră media. Acest lucru va asigura că dimensiunea fontului pentru h1 și nav elementele se vor schimba și ele.

Iată cum ne schimbăm rem valoare într-o interogare media:

@media (max-width: 768px) {
    html {
        font-size: 14px
    }
}

Și exact așa, avem un punct de întrerupere și pentru toate dimensiunile noastre de fonturi. Observați cum se modifică dimensiunea fontului pe măsură ce pagina traversează marca de 768 pixeli:

Text alternativ

Au trecut doar cinci minute, dar acum ați învățat de fapt să creați dimensiuni de font, imagini și elemente de navigare pentru a răspunde la lățimea paginii. Este destul de bine și ați făcut primii pași către învățarea abilităților extrem de valoroase de a construi site-uri web receptive.

Dacă sunteți interesat să continuați această călătorie de învățare, vă recomand să aruncați o privire la curs Scrimba masiv pe această temă! Este predat de unul dintre cei mai populari profesori YouTube pe această temă și vă va duce la un nivel profesional în designul web receptiv.

Codificare fericita 🙂


Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.

bootcamp banner
Faceți clic aici pentru a ajunge la bootcampul avansat.