Ovaj članak pokazuje korake za izradu responzivnog dizajna web stranice u HTML-u i CSS-u pomoću:
Kako izraditi responzivni dizajn web stranice s HTML-om i CSS-om?
Stvaranje responzivnog dizajna web stranice s HTML-om i CSS-om uključuje izradu izgleda koji se prilagođava različitim veličinama i razlučivostima zaslona. Evo koraka koje možete slijediti za izradu responzivnog dizajna web stranice:
Korak 1: Meta oznaka Viewport
' prozor za prikaz ” meta oznaka igra vitalnu ulogu u stvaranju responzivnog web dizajna. Umeće se unutar '
< meta Ime = 'viewport' sadržaj = 'width=device-width,initial-scale=1' / >
Gornja meta oznaka ima dva atributa:
- ' Ime ” atribut govori naziv funkcionalnosti za koju je ova oznaka stvorena/korištena. Na primjer, postavljanje ' prozor za prikaz ' prema ' Ime ” za rad s prikazom različitih uređaja.
- ' sadržaj ” atribut definira prethodnu vrijednost atributa. Postavlja širinu svakog uređaja i skalira dokument/web stranicu na 100%.
Korak 2: Responzivne slike
Budući da se veličina slike razlikuje jedna od druge, teško je postaviti istu ' visina ' ili ' širina ” svojstvo za svaku sliku. Kada je veličina slike fiksna, korisnici ne mijenjaju veličinu slike web-stranice na zaslonu. Međutim, korisnici mogu postaviti responzivnu sliku putem sljedećeg koda:
img {
max- širina : 100 %;
}
' maksimalna širina ” CSS svojstvo ograničava prikaz slike unutar dodijeljenog prostora. Postavljanjem vrijednosti u “%”, slika se mijenja u veličini zajedno s promjenom veličine nadređenog elementa. Ovo stvara efekt responzivnosti za sliku.
Korak 3: Flexbox izgled
Izgled Flexboxa toplo se preporučuje za izradu responzivnog dizajna web stranice. Omogućuje prikaz HTML elemenata na određenom mjestu i promjenu veličine dostupnog prostora za svako dijete prema veličini koju ima nadređeni div. Izgled Flexboxa sadrži nekoliko svojstava koja pružaju puno slobode programeru, kao što je kod u nastavku:
< stil >
.roditelj {
zaslon: savitljiv;
}
.dijete {
savijati: 1 ;
tekst- uskladiti : centar;
}
< / stil >
< tijelo >
< div razreda = 'roditelj' >
< div razreda = 'dijete' stil = 'border: 3px puna plavoljubičasta;' >Dobro došli< / div >
< div razreda = 'dijete' stil = 'obrub: 3px puna tamnozelena;' >za< / div >
< div razreda = 'dijete' stil = 'obrub: 3px puno crveno;' >Linuxint< / div >
< / div >
< / tijelo >
U gornjem isječku koda:
- Prvo stvorite nadređeni div element s ID-om ' roditelj ' unutar '
” oznaka. - Zatim stvorite više podređenih div elemenata i dodijelite im klasu ' dijete ”.
- Zatim odaberite ' roditelj ' klasa i navedite vrijednost ' savijati 'za CSS' prikaz ” vlasništvo.
- Nakon toga unesite vrijednost ' 1 ' prema ' savijati 'imovina svakom' dijete ” koja čini da se podređeni element prikazuje kao flex.
Nakon izvršavanja gornjeg koda, web stranica izgleda ovako:
Gornji izlaz pokazuje da podređeni element dobiva jednaku širinu kada se promijeni veličina preglednika.
Korak 4: Izgled rešetke
Raspored rešetke stvara rešetku i dodjeljuje HTML elemente unutar dijela mreže. Elementi mreže mijenjaju se u odnosu na veličinu zaslona web stranice. Stvara responzivan dizajn kako se veličina HTML elementa mijenja u skladu sa zaslonom uređaja:
< stil >.kontejner {
prikaz: rešetka;
rešetka-predložak-stupci: 1fr 1fr 1fr;
}
< / stil >
< tijelo >
< div razreda = 'komponenta' >
< div stil = 'obrub: 3px puna šumskozelena;' >Linuxint< / div >
< div stil = 'obrub: 3px puna tamnozelena;' >Linuxint< / div >
< div stil = 'obrub: 3px puno crveno;' >Linuxint< / div >
< / div >
< / tijelo >
U gornjem kodu:
- Prvo stvorite nadređeni div i dodijelite mu klasu ' komponenta ' unutar '
” oznaka. Nakon toga u njemu stvorite tri podređena div elementa. - Zatim u CSS datoteci dodijelite ' rešetka ” vrijednost za “ prikaz ' vlasništvo za ' spremnik ” div.
- Nakon toga izradite tri dijela jednake veličine na web stranici koristeći ' mreža-predložak-stupac ” i postavite ga jednako na “ 1fr 1fr 1fr ” gdje fr znači “ frakcija ”.
Nakon kompajliranja gornjeg koda, izlaz izgleda ovako:
Izlaz prikazuje da divovi mijenjaju veličinu prema veličini zaslona u jednakim omjerima.
Korak 5: Medijski upiti
Korištenje medijskih upita za izradu responzivnog dizajna je neka vrsta stare škole, ali ipak većina web stranica koristi medijske upite. Medijski upiti mogu se dodati izravno u CSS datoteku nakon dodavanja zadanog stila za odabrani HTML element. Medijski upit čini kod malo dužim i neurednim. Budući da programer treba umetnuti kod za svaku veličinu zaslona zasebno.
Na primjer, pogledajte donji isječak koda:
@ medijima zaslon i ( min- širina : 640 px ) {.komponenta {
pozadina- boja : šumskozelena;
}
}
U gornjem isječku koda:
- Prvo postavite medijski upit koji primjenjuje CSS svojstva na odabranu klasu elementa ' komponenta ' kada širina veličine zaslona postane veća od ' 640 px ”.
- Zatim odaberite 'klasu komponente i postavite vrijednost' šumskozelena ' za ' boja pozadine ” vlasništvo.
.komponenta {
pozadina- boja : dodgerblue;
}
}
Zatim za gornji isječak koda:
- Postavite medijski upit za primjenu stilova kada je veličina širine manja od ' 1000 px ”.
- Sada odaberite ' komponenta ' klasa i navedite vrijednost ' dodgerblue ' za ' boja pozadine ” svojstvo:
Nakon izvršavanja gornjih isječaka koda, izlaz izgleda ovako:
Izlaz prikazuje da medijski upit mijenja pozadinu na temelju veličine zaslona. Veličina fonta, širina, visina i druga CSS svojstva također se mogu primijeniti slijedeći isti obrazac.
Moguće veličine zaslona prijelomnih točaka koje treba uzeti u obzir pri korištenju medijskih upita su:
- za ' mali ” veličina zaslona, postavite širinu manju od „ 640 px ”.
- za ' srednji ” veličine zaslona okvira za prikaz, širina se kreće između „ 641 px ' i ' 1007 px ”.
- za ' velika ” veličina zaslona, postavite širinu na „ 1008 px ” ili više.
Zaključak
Za izradu responzivnog dizajna web stranice, programeri moraju dodati ' polje za prikaz ' oznaka u '