proč to musíš dělat? obrázky adaptivní? Bohužel ty šťastné časy, kdy jste mohli na web vložit obrázek a naznačit jeho skutečné rozměry, jsou nenávratně pryč. Nyní musíme neustále myslet na malé obrazovky.

Co se stane, když je velikost obrázku větší než velikost obrazovky? Nejprve se objeví vodorovný posuvník, obrázky překročí adaptivní blok, čímž naruší design webu nebo budou jednoduše částečně oříznuty. V žádném případě to není vhodné a obrázky je také nutné přizpůsobit měnící se šířce obrazovky.

Jak vytvořit galerii s adaptivními obrázky?

Pro začátek v tagu img Již nemusíte zadávat šířku a výšku.

Chcete-li ponechat 3, 2 a nakonec pouze jeden obrázek v řadě, musíte použít dotazy na média.

Po určité šířce obrazovky, například 375 pixelů, by měly zbýt pouze 2 obrázky v řadě.

Do šablony stylů zapíšeme následující kód:

@media (max. šířka: 375 pixelů) (
#galerie #produkt (
max. šířka: 50 %
}

#galerie (
směr ohybu: sloupec;
}
}

Při rozkládání na flexbox-ach, vyžadováno pro sdílený kontejner #galerie, nastavte atribut.

Směr ohybu: sloupec;

Tímto způsobem zrušíme akci flexboxy na bloky s obrázky, které je násilím držely v řadě. Polovina obrázků se přesunula do spodní řady.

Jak udělat obrázek na pozadí responzivní?

Níže je uveden příklad toho, co mám na mysli.

Úkol je na různých zařízeních stále stejný, obrázek na pozadí se musí přizpůsobit různým rozlišením obrazovky, aniž by ztratil své proporce a kvalitu.

Ve značce HTML:

..Může tam být text, obrázky..

V tabulce CSS:

Nyní se podívejme blíže na nejdůležitější vlastnosti a jejich význam pro řešení našeho problému.

Velikost pozadí: obálka;

Význam "Pokrýt" umožňuje našemu obrazu přizpůsobit se různým velikostem obrazovky bez ztráty proporcí. Musíme však počítat s tím, že obrázek na pozadí musí mít opravdu velký rozměr, nejlépe alespoň 2000 pixelů na šířku. V opačném případě, pokud je velikost obrazu menší než velikost obrazovky, dojde k pixilaci, to znamená, že obraz bude rozmazaný.

Uchycení na pozadí: pevné;

Co se stane, když množství obsahu na výšku překročí výšku obrázku na pozadí a překročí jeho hranice?

Snímek obrazovky níže ukazuje, jak to bude vypadat bez pevný.

Abyste tomu zabránili, musíte opravit obrázek na pozadí v okně zobrazení, pak pozadí zůstane na svém místě, i když se obsah pohybuje.

Podívejte se na ukázku

A co malé obrazovky? Proč na ně nahrávat velký obrázek? To je příliš plýtvání z hlediska rychlosti stahování pro mobilní internet.

Pomocí libovolného grafického editoru zmenšíme fyzické rozměry obrázku na pozadí, například na šířku 1200 pixelů, takže budeme mít dva stejné obrázky: malý a velký.

Podívejme se na mediální dotaz:

@media only obrazovka a (max. šířka: 500px) (
tělo (
background-image: url(fotka-mala.jpg);
}
}

Pokud je šířka obrazovky menší než 500 pixelů, načte se malý obrázek. Neměli byste vytvářet malý obrázek, menší než 1200 pixelů, musíte vzít v úvahu, že některá zařízení mají malou fyzickou velikost obrazovky, ale s vysokým rozlišením.

Jedním z hlavních úkolů adaptivního rozvržení je změna měřítka obrázků (včetně pozadí) tak, aby byly správně zobrazeny na zařízeních s různým rozlišením obrazovky.

S obrázky ve štítku img Je to jednoduché: když nastavíte šířku v procentech, výška se automaticky změní. Tuto metodu nelze použít na obrázky na pozadí.

Tento trik spočívá v nastavení procentuální hodnoty výplně ( vycpávka) prvek. Metoda byla poprvé publikována ve starém článku na blogu A List Apart, ale stále funguje dobře.

Řekněme, že máte obrázek na pozadí o velikosti 800 x 450 pixelů a chcete z něj vytvořit pozadí s pevným poměrem stran 16:9. Níže uvedený kód se používá pro odsazení px, ale vše bude fungovat em. Aby to fungovalo správně ve starších prohlížečích, můžete použít HTML5 shiv .

Div.column ( max. šířka: 800 pixelů; ) figure.fixedratio ( padding-top: 56,25 %; /* 450 pixelů/800 pixelů = 0,5625 */ )

Přidání pozadí

Div.column ( /* Obrázek na pozadí musí být široký 800 pixelů */ max-width: 800 pixelů; ) figure.fixedratio ( padding-top: 56,25 %; /* 450px/800px = 0,5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg); background-size: cover -moz-background-size: cover;

Řekněme, že máte velký obrázek na pozadí, který vypadá skvěle na ploše. Na mobilním zařízení ale bude příliš malý, takže správným řešením by bylo zmenšit šířku pozadí.

Například obrázek o šířce 800 x 200 pixelů (4:1) na malé obrazovce o šířce 300 pixelů by měl být zmenšen na 150 pixelů (2:1). Pojďme počítat atributy výška A polstrování-top:

Obrázek ukazuje poměr stran obrázku na pozadí při různých šířkách. Sklon grafu odpovídá atributu polstrování-top, počáteční výška - do atributu výška. Výsledný kód je:

Div.column ( /* Obrázek na pozadí musí být široký 800 pixelů */ max-width: 800 pixelů; ) figure.fluidratio ( padding-top: 10%; /* sklon */ výška: 120px; /* počáteční výška */ background- obrázek: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center /* Internet Explorer 7 /8 */ )

Použití SCSS pro výpočet

/* Vypočítat poměr tekutin na základě dvou rozměrů (šířka/výška) */ @mixin fluid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -small: nth($small-size, 1); $height-large: nth($large-small, $height-small: nth($small-velikost, 2); / ($width-large - $width-small: $height-small - $width-small * $slope * 100%; ; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Tento prvek bude mít poměr proměnlivosti od 4:1 při 800px do 2:1 při 300px. */ @include fluid-ratio(800px 200px, 300px 150px obrázek na pozadí: url(http://voormedia.com/examples/amsterdam.jpg);

“ a jak různé návrhy používají tento termín a technologii. Nyní, když jsme viděli několik příkladů implementací v akci, zkusme navrhnout vlastní responzivní web!

V našem dnešním tutoriálu vám řekneme, jak vytvořit strukturu domovské stránky a přidat na ni funkci mediálních dotazů, což nám pomůže urychlit načítání webu, usnadní uživatelům proces navigace a také, což je důležité , nám pomáhají udržovat elegantní a atraktivní design při návštěvě webu z různých zařízení, jako jsou mobilní zařízení, různé operační systémy a při různých rozlišeních obrazovky.

Než se pustíme do procesu kódování HTML, nejprve se vypořádáme s metaznačkou „viewport“. Zařízení Apple iPhone a iPod Touch jsou naprogramována tak, aby automaticky škálovala webové stránky ve verzi prohlížeče Safari pro iOS.

Tato technologie umožňuje zobrazit na obrazovce celý web, ale bude v menší podobě. Vzhledem k tomu, že budeme používat dotazy na média speciálně k přizpůsobení designu různým velikostem obrazovky, nepotřebujeme automatické škálování poskytované zařízeními Apple. Metaznačka viewport vám také umožní nastavit možnosti, jak moc může uživatel přibližovat nebo oddalovat váš web. Ale hlavní věcí je zde možnost nastavit počáteční měřítko, ve kterém bude web otevřen. Konkrétně v našem dnešním průvodci doporučujeme, abyste svůj web zobrazili zcela bez změny měřítka.

Když začnete pracovat s HTML, pravděpodobně si všimnete, že dokument se skládá z celkem jednoduchých HTML5 prvků, s výjimkou meta tagu viewport a našeho divu s hlavním pozadím.

Body, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt,
blockquote, fieldset, legenda, label, input, textarea (
okraj: 0; výplň: 0; ohraničení: 0;
}
sh1, h2, h3, h4, h5, h6, p (
okraj: 0 0 1em 0;
}
h1(velikost písma: 200%;)
h2(velikost písma: 170%;)
h3(velikost písma: 160%;)
h4(velikost písma: 140%;)
h5(velikost písma: 120%;)
Nyní, protože vyvíjíme od nuly, můžete otevřít značku těla a přidat tam styly. Nastavíme barvu pozadí na bílou a barvu textu na tmavě šedou. Kombinace černého textu na bílém pozadí často vytváří pocit přílišného kontrastu a mnoha návštěvníkům to způsobuje oslnění v očích.

Html, tělo (výška: 100 %; )
Všimněte si také, že velikost písma je v jednotkách em, což je jeden z nejdůležitějších prvků při vývoji responzivního designu, protože velikost této jednotky je založena na procentech. Pokud nastavíte velikost písma na rozměry v pixelech, nebude se shodovat se zbytkem návrhu, pokud je web zmenšen, aby se správně zobrazoval na menších obrazovkách. Písmena buď zaberou celou obrazovku, nebo se navzájem překrývají, a to je naprosto nevzhledné.

Můžeme také přidat styl do naší třídy .homeContent a do #mainBG id. Definovali jsme výšku stránky, nastavili šířku na 100 % a vystředili obsah v rámci třídy .homeContent. ID #mainBG bude zodpovědné za obrázek na pozadí, což je v našem příkladu obrázek ze zásoby získaný od autora. Nastavili jsme také velikost pozadí na pokrytí, což roztáhne obraz tak, aby vyplnil celou obrazovku a umožnilo našemu obrázku na pozadí zachovat správné proporce při zobrazení na obrazovkách s vyšším rozlišením. Velikost našeho obrázku na pozadí „big.jpg“ je 1920 x 1189.

HomeContent (
výška: 100 %;
šířka: 100 %;
poloha: relativní;
okraj: 0 auto;
}

#mainBG (
background: url(images/big.jpg) no-repeat scroll;
pozadí-pozice:střed;
background-size: cover;
-moz-background-size: obal;
-o-background-size: obal;
}
Nyní, když jsme skončili se základy, pojďme implementovat dotazy na média. První dva dotazy se budou týkat počítačů Tablet PC. Pomocí těchto požadavků budeme schopni načíst středně velký obrázek na pozadí, protože načtení velkého obrázku může trvat jak dlouho, tak i šířku pásma, a pokud nepotřebujeme obrázek, který je dvakrát větší než obrazovka, pak nebudeme je potřeba to načíst. Velikost našeho obrázku na pozadí "medium.jpg" je 1024x770 pixelů. Musíme jej také umístit tak, aby se správně zobrazoval na všech typech tabletů.

@media only screen and (max-width: 1024px) and (orientation:landscape) (
#mainBG ( pozadí: url(obrázky/medium.jpg) 50% 0 neopakovatelné posouvání !important;
pozadí-pozice:střed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: obal;
-o-background-size: obal;
}
}
@media only screen a (min. šířka: 768px) a (max.šířka: 991px) (
#mainBG ( background: url(images/medium.jpg) 50% 80% no-repeat scroll !important;
pozadí-pozice:střed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: obal;
-o-background-size: obal;
}
}
Poslední dotaz bude na mobilní telefony. Prostřednictvím tohoto požadavku zobrazíme náš obrázek na pozadí s názvem „small.jpg“, jehož rozměry jsou 767x475.

@media only screen a (min-width: 0px) a (max-width: 767px) (
#mainBG ( background: url(images/small.jpg) 75% 80% no-repeat scroll !important;
pozadí-pozice:střed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: obal;
-o-background-size: obal;
}
}
Náhled práce provedené v prohlížeči. Otevřete své mistrovské dílo nejprve na celou obrazovku a poté postupně zmenšujte zobrazovací okno. Uvidíte, že se velikost obrázku okamžitě začne měnit. Pokuste se určit, v jaké poloze jsou aktivovány dotazy na média a v jakém místě se mění velikost obrazu.

Zdůrazňujeme, že vše bude správně, také úplně dole bude přidána tmavá průhledná, kam můžete napsat svá klíčová slova a jistě to elegantně navrhnout. Je vyrobena tak, aby se dala stylově ozdobit, kde se dá rychle odstranit podobnou metodou. Ale hlavní věc je, že pokud zadáte například ze smartphonu, fotografie dokonale zapadne do hlavního designu.

Většina webmasterů dělá plný layout pro responzivní design, ale nepamatují si nic o pozadí, možná nevědí, kam by se také mělo umístit podle stylu, protože jeho struktura bude smíšená, a to je design, který se hlavně snažíme vytvořit, ho umístí na prominentní místo. Že nyní je možné jej vytvořit jako gumu, kde se automaticky začne natahovat, aby vše vypadalo správně na jakékoli obrazovce.

To při kontrole, jestli to na hlavní jde pod široký monitor, tak tady někde pod tablet.

Začněme instalaci:

html,tělo(
výška: 100 %;
}
tělo (
background-image: url(http://site/ABVUN/sarunolas/zornet/kotas/2048.jpg) ;
pozadí-pozice: střed uprostřed;
background-repeat: no-repeat;
pozadí-příloha: pevná;
background-size: cover;
barva pozadí: #8c8383;

Div,tělo(
okraj: 0;
výplň: 0;
rodina písem: exo, bezpatkové;

}
.techniqu-lodmakin (
výška: 100 %;
šířka: 100 %;
}

Tenenbireg-wseviewpos (
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
šířka: 100 %;
výška: 51 %;
dole: 0;
displej: blok;
pozice: absolutní;
barva pozadí: rgba(41, 39, 39, 0,67);
barva: #dcf0f7;
polstrování: 0,7 em;
text-shadow: 0 1px 0 #383535;
}

Zde jsme použili vlastnost CSS background-size, aby se vše správně seřadilo tam, kde je potřeba zdůraznit, že zde není potřeba používat JavaScript, vše se provádí pomocí čistých stylů.

Připojen je také příklad z GitHubu.

Při přizpůsobování je potřeba vzít v úvahu i detaily designu, jedná se o tlačítka nebo ikony, které se na mobilních zařízeních nebudou zobrazovat správně a jsou k tomu určeny, které budou velikostně odstraněny a můžete si sestavit design, jak potřebujete, a správně řečeno, pro pohodlí uživatele, který je dostupný z mobilních zařízení a vše se tam již tvoří podle potřeby.

Pro začátek budeme potřebovat dva obrázky na pozadí, první obrázek musí být minimálně širokoúhlý 1920*1080, tím dosáhneme pokrytí celé zobrazovací plochy na většině aktuálně vyráběných širokoúhlých monitorů.

Druhý obrázek bude menší verzí prvního obrázku na pozadí, ale pouze pro mobilní zařízení. Řekněme, že tyto obrázky budou mít rozlišení 1920*1080 a 768*480.
Druhý obrázek má zkrátit dobu načítání stránky při malých rozlišeních obrazovky, a proto použijeme mediální dotaz, abychom získali menší verzi obrázku na pozadí, i když bez něj vše funguje dobře.
Nebudu vás učit, jak upravovat obrázky na pozadí a snižovat jejich váhu, jsem si jistý, že každý má záložky s takovými službami nebo ví, jak pracovat s Photoshopem.

No, samotný kód, zdrojový kód byl stažen ze zahraničního webu, ale není to těžké pochopit, i když komentáře jsou v angličtině, nesmazal jsem je, aby to bylo jasnější:
CSS:

200?"200px":""+(this.scrollHeight+5)+"px");">
tělo (
/* Umístění obrázku */
background-image: url(images/background-photo.jpg);

/* Obrázek je vždy vertikálně i horizontálně vycentrován */
pozadí-pozice: střed uprostřed;

/* Obrázek se neopakuje */
background-repeat: no-repeat;

/* Zafixuje obrázek ve výřezu, aby se při tom nepohnul
výška obsahu je větší než výška obrázku */
pozadí-příloha: pevná;

/* Díky tomu se obrázek na pozadí mění podle velikosti kontejneru */
background-size: cover;

/* Vyberte plnou barvu pozadí, která se bude zobrazovat při načítání obrázku na pozadí */
background-color:#464646;

/* KRÁTKÝ OZNAČENÍ CSS
* pozadí: url(pozadí-foto.jpg) středová obálka bez opakování opravena;
*/
}

/* Pro mobilní zařízení */
@media only obrazovka a (max. šířka: 767px) (
tělo (
/* Velikost souboru tohoto obrázku na pozadí je o 93 % menší
* pro zvýšení rychlosti načítání stránky při připojení k mobilnímu internetu */
background-image: url(images/fotka-pozadi-mobilnich-zarizeni.jpg);
}
}