Zašto to moraš učiniti? slike prilagodljive? Nažalost, zauvijek su nestala ona sretna vremena kada ste mogli umetnuti sliku na web stranicu i označiti njezine prave dimenzije. Sada stalno moramo misliti na male ekrane.

Što se događa ako je veličina slike veća od veličine zaslona? Prvo će se pojaviti vodoravna traka za pomicanje, slike će ići izvan adaptivnog bloka, razbijajući tako dizajn web mjesta ili jednostavno biti djelomično odrezane. U svakom slučaju, to nije prikladno i slike također moraju biti prilagođene promjenjivoj širini zaslona.

Kako napraviti galeriju s adaptivnim slikama?

Za početak, u tag img Više ne morate navoditi širinu i visinu.

Da biste ostavili 3, 2 i na kraju samo jednu sliku u nizu, morate koristiti media queries.

Nakon određene širine zaslona, ​​na primjer 375 piksela, trebale bi ostati samo 2 slike u nizu.

U listu stilova pišemo sljedeći kod:

@media (max-width: 375px) (
#galerija #proizvod (
maksimalna širina: 50%
}

#galerija (
smjer savijanja: stupac;
}
}

Prilikom polaganja na flexbox-ah, potreban za zajednički spremnik #galerija, postavite atribut.

Flex-smjer: stupac;

Ovim putem poništavamo akciju flexboxes na blokove sa slikama, koji su ih prisilno držali u nizu. Polovica slika prešla je u donji red.

Kako pozadinsku sliku učiniti responzivnom?

Ispod je primjer onoga što mislim.

Zadatak je i dalje isti; pozadinska slika se mora prilagoditi različitim razlučivostima zaslona bez gubitka proporcija i kvalitete.

U HTML označavanju:

..Ovdje može biti tekst, slike..

U CSS tablici:

Pogledajmo sada pobliže najznačajnija svojstva i njihova značenja za rješavanje našeg problema.

Veličina pozadine: naslovnica;

Značenje "pokriti" omogućuje našoj slici da se prilagodi različitim veličinama zaslona bez gubitka proporcija. Međutim, moramo uzeti u obzir da pozadinska slika mora biti stvarno velika, po mogućnosti barem 2000 piksela širine. U protivnom, ako je veličina slike manja od veličine ekrana, doći će do piksilacije, odnosno slika će biti mutna.

Pozadina-privitak: fiksno;

Što se događa ako količina sadržaja po visini premaši visinu pozadinske slike i prijeđe njezine granice?

Snimka zaslona u nastavku pokazuje kako će izgledati bez fiksni.

Dakle, kako biste spriječili da se to dogodi, trebate popraviti pozadinsku sliku u prozoru za gledanje, tada će pozadina ostati na mjestu čak i kada se sadržaj pomakne.

Pogledajte demo

Što je s malim ekranima? Zašto postaviti veliku sliku na njih? Ovo je previše rastrošno u smislu brzine preuzimanja za mobilni Internet.

Pomoću bilo kojeg grafičkog uređivača smanjujemo fizičke dimenzije pozadinske slike, npr. na 1200 piksela u širinu, tako da ćemo imati dvije identične slike: malu i veliku.

Pogledajmo medijski upit:

@media only screen i (maks. širina: 500 px) (
tijelo (
pozadinska slika: url(fotografija-mala.jpg);
}
}

Ako je širina zaslona manja od 500 piksela, učitat će se mala slika. Ne biste trebali napraviti malu sliku, manju od 1200 piksela; morate uzeti u obzir da neki uređaji imaju male fizičke veličine zaslona, ​​ali s visokom rezolucijom.

Jedan od glavnih zadataka u prilagodljivom izgledu je skaliranje slika (uključujući pozadinske) tako da se ispravno prikazuju na uređajima s različitim razlučivostima zaslona.

Sa slikama u oznaci img Jednostavno je: kada postavite širinu kao postotak, visina će se automatski skalirati. Ova se metoda ne može primijeniti na pozadinske slike.

Ovaj trik je postaviti vrijednost postotka ispune ( podstava) element. Metoda je prvi put objavljena u starom članku na blogu A List Apart, ali još uvijek dobro funkcionira.

Recimo da imate pozadinsku sliku od 800 x 450 piksela i želite je učiniti pozadinom s fiksnim omjerom 16:9. Kod u nastavku koristi se za uvlačenje px, ali sve će raditi s em. Postoji i HTML5 element figure; možete koristiti HTML5 shiv.

Div.column ( max-width: 800px; ) figure.fixedratio ( padding-top: 56,25%; /* 450px/800px = 0,5625 */ )

Dodavanje pozadine

Div.column ( /* Pozadinska slika mora biti široka 800px */ max-width: 800px; ) figure.fixedratio ( padding-top: 56,25%; /* 450px/800px = 0,5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg); -moz-background-size: cover;

Recimo da imate veliku pozadinsku sliku koja sjajno izgleda na radnoj površini. Ali na mobilnom uređaju to će biti premalo pa bi pravo rješenje bilo smanjiti širinu pozadine.

Na primjer, sliku širine 800 x 200 piksela (4:1) na malom ekranu, širine 300 piksela, treba smanjiti na 150 piksela (2:1). Prebrojimo atribute visina I padding-top:

Slika prikazuje omjer širine i visine pozadinske slike na različitim širinama. Nagib grafa odgovara atributu padding-top, početna visina - do atributa visina. Rezultirajući kod je:

Div.column ( /* Pozadinska slika mora biti široka 800 px */ max-width: 800 px; ) figure.fluidratio ( padding-top: 10%; /* nagib */ visina: 120 px; /* početna visina */ background- slika: url(http://voormedia.com/examples/amsterdam.jpg); -moz-background-size: cover; /* Firefox 3.6 */ background-position: center /* Internet Explorer 7 /8 */ )

Korištenje SCSS-a za izračun

/* Izračunaj omjer tekućine na temelju dvije dimenzije (širina/visina) */ @mixin fluid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -mali: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); large - $height-small) / ($width-small); $height-small - $width-small; $nagib * 100%; -moz-background-size: cover ; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Ovaj element će imati omjer fluida od 4:1 na 800px do 2:1 na 300px. */ @include fluid-ratio(800px 200px, 300px 150px); pozadinska slika: url(http://voormedia.com/examples/amsterdam.jpg);

“, te kako različiti dizajni primjenjuju ovaj izraz i tehnologiju. Sad kad smo vidjeli neke primjere implementacija na djelu, pokušajmo dizajnirati vlastitu responzivnu web stranicu!

U našem današnjem vodiču reći ćemo vam o razvoju strukture početne stranice i dodavanju funkcionalnosti medijskih upita na nju, što će nam pomoći da ubrzamo učitavanje web stranice, olakšati proces navigacije za korisnike, a također, što je još važnije , pomažu nam da održimo uredan i atraktivan dizajn prilikom posjeta web-mjestu s različitih uređaja, kao što su mobilni uređaji, različiti operativni sustavi i različite rezolucije zaslona.

Prije nego što pređemo na proces kodiranja HTML-a, obradimo meta oznaku "viewport". Apple iPhone i iPod Touch uređaji programirani su za automatsko skaliranje web stranica u iOS verziji preglednika Safari.

Ova tehnologija omogućuje prikaz cijele web stranice na ekranu, ali će biti u manjem obliku. Budući da ćemo koristiti medijske upite posebno za prilagodbu dizajna različitim veličinama zaslona, ​​ne trebamo automatsko skaliranje koje pružaju Apple uređaji. Meta oznaka okvira za prikaz također će vam omogućiti da postavite opcije za koliko korisnik može povećati ili smanjiti vašu stranicu. Ali glavna stvar ovdje je mogućnost postavljanja početne ljestvice u kojoj će se stranica otvoriti. Konkretno, u našem današnjem vodiču preporučujemo da svoju stranicu prikažete bez ikakvog skaliranja.

Kada počnete raditi s HTML-om, vjerojatno ćete primijetiti da se dokument sastoji od prilično jednostavnih HTML5 elemenata, s iznimkom meta oznake prozora i našeg diva s glavnom pozadinom.

Tijelo, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt,
blockquote, fieldset, legend, label, input, textarea (
margina: 0; ispuna: 0; granica: 0;
}
sh1, h2, h3, h4, h5, h6, p (
margina: 0 0 1em 0;
}
h1(veličina fonta: 200%;)
h2(veličina fonta: 170%;)
h3(veličina fonta: 160%;)
h4(veličina fonta: 140%;)
h5(veličina fonta: 120%;)
Sada, budući da razvijamo od nule, možete otvoriti oznaku tijela i tamo dodati stilove. Boju pozadine postavili smo na bijelu, a boju teksta na tamno sivu. Kombinacija crnog teksta na bijeloj pozadini često stvara osjećaj pretjeranog kontrasta, a mnogim posjetiteljima izaziva blještavilo u očima.

Html, tijelo ( visina: 100%; )
Također imajte na umu da je veličina fonta izražena u em jedinicama, a to je jedan od najvažnijih elemenata pri razvoju responzivnog dizajna, jer se veličina ove jedinice temelji na postotku. Ako postavite veličinu fonta na dimenzije piksela, neće odgovarati ostatku dizajna ako je stranica smanjena za ispravan prikaz na manjim ekranima. Slova će ili zauzeti cijeli ekran ili se preklapati, a to je potpuno neugledno.

Također možemo dodati stil našoj klasi .homeContent i ID-u #mainBG. Definirali smo visinu stranice, postavili širinu na 100% i centrirali sadržaj unutar klase .homeContent. ID #mainBG bit će odgovoran za pozadinsku sliku, koja je u našem primjeru stock slika dobivena od autora. Također postavljamo veličinu pozadine za pokrivanje, koja će rastegnuti sliku da ispuni cijeli zaslon i omogućiti našoj pozadinskoj slici da zadrži točne proporcije kada se prikazuje na zaslonima veće rezolucije. Veličina naše pozadinske slike “big.jpg” je 1920x1189.

Početna Sadržaj (
visina: 100%;
širina: 100%;
položaj: relativan;
margina: 0 auto;
}

#mainBG (
pozadina: url(images/big.jpg) pomicanje bez ponavljanja;
položaj pozadine: središte;
veličina pozadine: naslovnica;
-moz-veličina-pozadine: naslovnica;
-o-veličina-pozadine: naslovnica;
}
Sad kad smo završili s osnovama, implementirajmo medijske upite. Prva dva upita bit će za tablet računala. Pomoću ovih zahtjeva moći ćemo učitati pozadinsku sliku srednje veličine, budući da učitavanje velike slike može oduzeti i vrijeme i propusnost, a ako nam ne treba slika koja je dvostruko veća od veličine zaslona, ​​onda ne treba ga učitati. Veličina naše pozadinske slike "medium.jpg" je 1024x770 piksela. Također ga moramo postaviti na način da se ispravno prikazuje na svim vrstama tableta.

@media only screen i (maks. širina: 1024 px) i (orijentacija: pejzaž) (
#mainBG ( pozadina: url(images/medium.jpg) 50% 0 pomicanje bez ponavljanja !važno;
položaj pozadine: središte;
veličina pozadine: naslovnica;
-webkit-veličina-pozadine: naslovnica;
-moz-veličina-pozadine: naslovnica;
-o-veličina-pozadine: naslovnica;
}
}
@medijski samo zaslon i (min. širina: 768 px) i (maks. širina: 991 px) (
#mainBG ( pozadina: url(images/medium.jpg) 50% 80% pomicanje bez ponavljanja !važno;
položaj pozadine: središte;
veličina pozadine: naslovnica;
-webkit-veličina-pozadine: naslovnica;
-moz-veličina-pozadine: naslovnica;
-o-veličina-pozadine: naslovnica;
}
}
Zadnji upit bit će za mobilne telefone. Ovim zahtjevom ćemo prikazati našu pozadinsku sliku pod nazivom “small.jpg”, dimenzija koje su 767x475.

@medijski samo zaslon i (min. širina: 0 px) i (maks. širina: 767 px) (
#mainBG ( pozadina: url(images/small.jpg) 75% 80% pomicanje bez ponavljanja !važno;
položaj pozadine: središte;
veličina pozadine: naslovnica;
-webkit-veličina-pozadine: naslovnica;
-moz-veličina-pozadine: naslovnica;
-o-veličina-pozadine: naslovnica;
}
}
Pregledajte obavljeni posao u pregledniku. Prvo otvorite svoje remek-djelo na cijelom zaslonu, a zatim postupno smanjite prozor za gledanje. Vidjet ćete kako se slika odmah počinje mijenjati u veličini. Pokušajte odrediti u kojoj se poziciji aktiviraju medijski upiti i mijenja veličina slike.

Naglašavamo da će sve biti točno, također na samom dnu će biti dodan tamni prozirni, gdje možete napisati svoje ključne riječi i svakako to elegantno dizajnirati. Izrađena je tako da se može stilski dekorirati, pri čemu se sličnom metodom brzo uklanja. Ali glavna stvar je da ako unesete, na primjer, s pametnog telefona, tada se fotografija savršeno uklapa u glavni dizajn.

Većina web majstora radi potpuni izgled za responzivni dizajn, ali se ne sjećaju ničega o pozadini, možda ne znaju gdje bi je također trebali postaviti prema stilu, jer će njena struktura biti miješana, a ovo je dizajn koji uglavnom nastojimo stvoriti staviti na istaknuto mjesto. Sada ga je moguće izraditi kao gumu, gdje će se automatski početi rastezati tako da sve izgleda ispravno na bilo kojem ekranu.

Ovo je kod provjere, ako na glavnom ide ispod širokog monitora, onda ovdje negdje ispod tableta.

Počnimo s instalacijom:

html, tijelo (
visina: 100%;
}
tijelo (
pozadinska slika: url(http://site/ABVUN/sarunolas/zornet/kotas/2048.jpg) ;
položaj pozadine: centar centar;
pozadinsko ponavljanje: bez ponavljanja;
privitak pozadine: fiksno;
veličina pozadine: naslovnica;
boja pozadine: #8c8383;

Div, tijelo (
margina: 0;
ispuna: 0;
obitelj-fontova: exo, sans-serif;

}
.techniqu-lodmakin (
visina: 100%;
širina: 100%;
}

Tenenbireg-wseviewpos (
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
veličina okvira: border-box;
širina: 100%;
visina: 51%;
dolje: 0;
prikaz: blok;
pozicija: apsolutna;
boja pozadine: rgba(41, 39, 39, 0.67);
boja: #dcf0f7;
podstava: 0,7em;
tekst-sjena: 0 1px 0 #383535;
}

Ovdje smo upotrijebili CSS svojstvo veličine pozadine tako da je sve ispravno poredano gdje trebamo naglasiti da ovdje nema potrebe za korištenjem JavaScripta, sve se radi pomoću čistih stilova.

U prilogu je i primjer s GitHuba.

Također morate voditi računa o detaljima dizajna prilikom prilagodbe, to su gumbi ili ikone koje se neće ispravno prikazati na mobilnim uređajima i namijenjene su za tu svrhu, koje će se smanjiti u veličini, a vi možete graditi dizajn kako želite, i to točno rečeno, radi udobnosti korisnika kojem se može pristupiti s mobilnih uređaja, a tu je već sve formirano po potrebi.

Za početak, trebat će nam dvije pozadinske slike, prva slika mora biti barem široka 1920*1080, s time postižemo pokrivenost cijelog područja gledanja na većini širokozaslonskih monitora koji se trenutno proizvode.

Druga slika bit će manja verzija prve pozadinske slike, ali samo za mobilne uređaje. Recimo da će te slike imati rezolucije 1920*1080 i 768*480.
Druga slika je smanjiti vrijeme učitavanja stranice na malim razlučivostima zaslona, ​​a za to ćemo koristiti medijski upit za dobivanje manje verzije pozadinske slike, iako sve radi dobro i bez njega.
Neću vas učiti kako urediti pozadinske slike i smanjiti njihovu težinu; siguran sam da svatko ima oznake s takvim uslugama ili zna raditi s Photoshopom.

Pa sam kod, izvorni kod je skinut sa stranog sajta, ali nije teško razumjeti iako su komentari na engleskom, nisam ih izbrisao da bi bilo jasnije:
CSS:

200?"200px":""+(this.scrollHeight+5)+"px");">
tijelo (
/* Lokacija slike */
slika-pozadine: url(slike/fotografija-pozadine.jpg);

/* Slika je cijelo vrijeme centrirana okomito i vodoravno */
položaj pozadine: centar centar;

/* Slika se ne ponavlja */
pozadinsko ponavljanje: bez ponavljanja;

/* Čini sliku fiksiranom u okviru za prikaz tako da se ne pomiče kada
visina sadržaja je veća od visine slike */
privitak pozadine: fiksno;

/* To je ono što čini pozadinsku sliku promjenom veličine na temelju veličine spremnika */
veličina pozadine: naslovnica;

/* Odaberite čvrstu boju pozadine koja će biti prikazana dok se pozadinska slika učitava */
boja pozadine:#464646;

/* SKRAĆENA CSS NOTACIJA
* pozadina: url(background-photo.jpg) centar središnji naslov bez ponavljanja popravljen;
*/
}

/* Za mobilne uređaje */
@medijski samo zaslon i (maksimalna širina: 767 px) (
tijelo (
/* Veličina datoteke ove pozadinske slike je 93% manja
* za poboljšanje brzine učitavanja stranica na mobilnim internetskim vezama */
slika-pozadine: url(slike/fotografija-pozadine-mobilnih-uređaja.jpg);
}
}