Care sunt pașii pentru a crea un site web receptiv cu HTML și CSS?

Acest articol demonstrează pașii pentru a crea un design web receptiv în HTML și CSS folosind:

• Metaetichetă Viewport
• Imagini receptive
• Aspect Flexbox
• Aspect grilă
• Interogări media

Cum se creează un design de site web receptiv cu HTML și CSS?

Crearea unui design web receptiv cu HTML și CSS implică construirea unui aspect care se adaptează la diferite dimensiuni și rezoluții ale ecranului. Iată pașii pe care îi puteți urma pentru a crea un design de site web receptiv:

Pasul 1: Metaetichetă Viewport

„ fereastra ” metaeticheta joacă un rol vital în crearea designului web responsive. Este introdus în interiorul „ ” eticheta fișierului HTML care conține următoarele atribute:

Metaeticheta de mai sus are două atribute:

• „ Nume ” atributul indică numele funcționalității pentru care este creată/folosită această etichetă. De exemplu, setarea „ fereastra „la „ Nume ” atribut pentru a se ocupa de fereastra de vizualizare a diferitelor dispozitive.
• „ conţinut ” atributul definește valoarea anterioară a atributului. Setează lățimea fiecărui dispozitiv și scalează documentul/pagina web la 100%.

Pasul 2: Imagini receptive

Deoarece dimensiunea imaginii variază una de cealaltă, este dificil să setați aceeași „ înălţime ” sau ” lăţime ” proprietate pentru fiecare imagine. Când dimensiunea imaginii este fixă, utilizatorii nu redimensionează imaginea paginii web cu ecranul. Cu toate acestea, utilizatorii pot seta imaginea receptivă prin următorul cod:

„ lățimea maximă ” Proprietatea CSS restricționează afișarea imaginii în spațiul alocat. Prin setarea valorii în „%”, imaginea se redimensionează împreună cu redimensionarea elementului părinte. Acest lucru creează un efect de răspuns pentru imagine.

Pasul 3: Aspect Flexbox

Aspectul Flexbox este foarte recomandat pentru a crea un site web receptiv. Permite afișarea elementelor HTML într-o anumită poziție și redimensionarea spațiului disponibil pentru fiecare copil în funcție de dimensiunea disponibilă de div-ul părinte. Aspectul Flexbox conține mai multe proprietăți care oferă multă libertate dezvoltatorului, cum ar fi codul de mai jos:

În fragmentul de cod de mai sus:

• Mai întâi, creați un element div părinte cu un id de „ mamă ' în interiorul ' ' etichetă.
• Apoi, creați mai multe elemente div copil și atribuiți-le o clasă de „ copil ”.
• Apoi, selectați „ mamă ” și furnizează valoarea ” contracta ” pentru CSS ” afişa ” proprietate.
• După aceea, furnizați o valoare de „ 1 „la „ contracta „proprietate pentru fiecare” copil ” care face ca elementul copil să se afișeze ca un flex.

După executarea codului de mai sus, pagina web arată astfel:

Ieșirea de mai sus arată că elementul copil capătă aceeași lățime atunci când browserul este redimensionat.

Pasul 4: Aspect grilă

Aspectul grilei creează o grilă și atribuie elementele HTML în interiorul porțiunii de grilă. Elementele grilei se modifică în funcție de dimensiunea ecranului paginii web. Acesta creează un design receptiv pe măsură ce dimensiunea elementului HTML se modifică în funcție de ecranul dispozitivului:

În codul de mai sus:

• Mai întâi, creați un div părinte și atribuiți-i o clasă de „ componentă ' în interiorul ' ' etichetă. După aceea, creați trei elemente div copil în el.
• Apoi, în fișierul CSS, atribuiți un „ grilă „valoare la „ afişa ” proprietate pentru ” recipient ” div.
• După aceea, creați trei porțiuni de dimensiuni egale pe pagina web folosind „ grilă-șablon-coloană ” și setați-o egală cu ” 1fr 1fr 1fr ' unde fr înseamnă ' fracțiune ”.

După compilarea codului de mai sus, rezultatul arată astfel:

Ieșirea arată că div-urile se redimensionează în funcție de dimensiunea ecranului cu proporții egale.

Pasul 5: Interogări media

Utilizarea interogărilor media pentru a face un design responsive este un fel de chestie veche, dar totuși, majoritatea site-urilor web folosesc interogări media. Interogările media pot fi adăugate direct în fișierul CSS după adăugarea stilului implicit pentru elementul HTML selectat. Interogarea media face codul puțin mai lung și dezordonat. Deoarece dezvoltatorul trebuie să introducă cod pentru fiecare dimensiune de ecran separat.

De exemplu, vedeți fragmentul de cod de mai jos:

În fragmentul de cod de mai sus:

• Mai întâi, setați interogarea media care aplică proprietățile CSS la clasa de elemente selectată „ componentă „ când lățimea ecranului devine mai mare decât „ 640px ”.
• Apoi, selectați „clasa de componente și setați valoarea „ padure verde ' pentru ' culoare de fundal ” proprietate.

Apoi, pentru fragmentul de cod de mai sus:

• Setați interogarea media pentru a aplica stiluri atunci când dimensiunea lățimii este mai mică decât „ 1000px ”.
• Acum, selectați „ componentă ” și oferă o valoare de ” dodgerblue ' pentru ' culoare de fundal ” proprietate:

După executarea fragmentelor de cod de mai sus, rezultatul arată astfel:

Ieșirea arată că interogarea media modifică fundalul în funcție de dimensiunea ecranului. Mărimea fontului, lățimea, înălțimea și alte proprietăți CSS pot fi, de asemenea, aplicate urmând același model.

Dimensiunile posibile ale ecranului punctelor de întrerupere care trebuie luate în considerare la utilizarea interogărilor media sunt:

• Pentru ' mic ” dimensiunea ecranului, setați lățimea mai mică decât „ 640px ”.
• Pentru ' mediu ” dimensiunea ecranului ferestrei de vizualizare, lățimea variază între „ 641px ' și ' 1007 px ”.
• Pentru ' mare ” dimensiunea ecranului, setați lățimea la „ 1008px ” sau mai mare.

Concluzie

Pentru a crea un design web receptiv, dezvoltatorii trebuie să adauge „ fereastra eticheta ” în ” ” secțiunea de etichete. Apoi, utilizați „ Flexbox ' și ' Grilă ” Aspect. Aceste module de layout ajută la crearea unui design receptiv. În cele din urmă, „ interogări media ” ajută dezvoltatorul să stileze versiuni diferite ale aceluiași site web pentru diferite dimensiuni de ecran. Acest articol a demonstrat pașii prin care poate fi creat un design de site web receptiv.