Sveiki visiem! Mēs noskaidrojām, kas ir adaptīvais izkārtojums, režģis un kā padarīt fontus adaptīvus. Tagad apskatīsim, kā pielāgot attēlus.

Patiesībā šī ir ļoti vienkārša tēma, un tas neaizņems daudz laika.

Lai attēli būtu atsaucīgi, tiem vienkārši jāpievieno rekvizīts max-width=100%.

Img (
maksimālais platums: 100%;
}

Visi! Tagad mūsu attēls nepārsniegs vecāku konteineru un tiks pielāgots atkarībā no ekrāna izšķirtspējas.

Papildus attēliem šo paņēmienu varat izmantot arī videoklipiem un citiem multivides failiem.

Attēls, iegults, objekts, video (
maksimālais platums: 100%;
}

Viss būtu kārtībā, taču tas darbojas tikai operētājsistēmā IE7+.

Img (
platums: 100%;
}

Tie. Maksimālā platuma vietā ierakstiet platumu .

Vēl viena problēma, ar kuru jūs varat saskarties, ir slikta attēla mērogošana sistēmā Windows. Jā, tieši sistēmā, nevis pārlūkprogrammā. Ja paskatās uzmanīgi, jūs varat redzēt dažus artefaktus.

Šīs problēmas risināšana IE ir vienkārša.

Logotips (
fons: nav;
filtrs: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}

Tie. Filtra rekvizīts palīdz mums novērst šo problēmu.

Kad esat apguvis atsaucīgo režģi, ir pienācis laiks apskatīt citu tīmekļa lapu saturu, kas prasa zināmas manipulācijas, lai tas kļūtu atsaucīgs. Mēs runājam par attēliem un video. Ja tīmekļa lapai vienkārši pievienosiet attēlu un padarīsiet pārlūkprogrammas logu mazāku, jūs redzēsiet, ka attēls nepielāgojas loga platumam, bet saglabā sākotnējos izmērus. Tas var izraisīt horizontālu ritināšanu, kā arī var izraisīt attēla paplašināšanos ārpus adaptīvās kolonnas:

Kā padarīt attēlu atsaucīgu, izmantojot CSS? Vispirms no attēla atzīmes (ja tāds ir) ir jānoņem platuma un augstuma atribūti. Jūsu HTML kodā tie nedrīkst būt:

Pievienojiet savai stila lapai šādu ierakstu:

Attēls (maksimālais platums: 100%; )

Tas nozīmē, ka maksimālais atzīmes platums ir būs vienāds ar konteinera bloka platumu, kurā tas atrodas. Attēls nevarēs pārsniegt savu vecāku, un, ja mainīsies vecāka platums, tas automātiski pielāgosies tam.

Tādā pašā veidā attēla platumu var iestatīt vienādu, piemēram, ar pusi no vecākkonteinera platuma:

Attēls (maksimālais platums: 50%; )

Lai tagi , un , un , būtu adaptīvi, pievienojiet tiem to pašu CSS kodu, ko pievienojat attēliem. Ieteicams uzskaitīt visus atlasītājus uzreiz:

Attēls, video, iegults, objekts (maksimālais platums: 100%; )

Lietas kļūst sarežģītākas, ja ieguljat videoklipu, izmantojot . Tad iepriekš minētā metode šeit nedarbojas. Jums būs jāizmanto JavaScript vai gudrāks CSS kods.

Ja izvēlējāties otro opciju, atzīme būs jāievieto papildu konteinerā. Piemēram:

Pēc tam pievienojiet šādu CSS kodu:

Videoklips ( augstums: 0; pozīcija: relatīvs; polsterējums apakšā: 56,25%; ) .video iframe ( pozīcija: absolūtais; pa kreisi: 0; augšā: 0; platums: 100%; augstums: 100%; )

Kā pamanījāt, kodā ir rekvizīts polsterējums-apakšā ar dīvainu vērtību 56,25% . Ko tas nozīmē? Polsterējuma apakšdaļas vērtība, kas norādīta procentos, tiek aprēķināta attiecībā pret bloka platumu. Mēs ieguvām skaitli 56,25, nosakot iegultā videoklipa malu attiecību (16:9) un dalot īsās malas numuru ar garās malas numuru un pēc tam rezultātu reizinot ar 100.

Viens no galvenajiem adaptīvā izkārtojuma uzdevumiem ir attēlu mērogošana (ieskaitot fona attēlus), lai tie tiktu pareizi parādīti ierīcēs ar dažādu ekrāna izšķirtspēju.

Ar attēliem img tagā viss ir vienkārši: iestatot platumu procentos, augstums tiks automātiski mērogots. Šo metodi nevar izmantot fona attēliem.

Šis triks ir iestatīt procentuālo vērtību elementa pildījumam. Metode pirmo reizi tika publicēta vecā emuāra rakstā A List Apart, taču tā joprojām darbojas labi.

Pieņemsim, ka jums ir fona attēls ar 800 x 450 pikseļiem un vēlaties to izveidot par fonu ar fiksētu malu attiecību 16:9. Tālāk norādītajā kodā atkāpei tiek izmantots px, taču tas darbosies arī ar tiem. Ir arī HTML5 figūras elements, lai tas pareizi darbotos vecākās pārlūkprogrammās, varat izmantot HTML5 shiv .

Div.kolonna (maksimālais platums: 800 pikseļi; ) figūra.fiksēta attiecība (augšējā polsterējums: 56,25%; /* 450 pikseļi/800 pikseļi = 0,5625 */ )

Div.column ( /* Fona attēlam ir jābūt 800 pikseļu platumam */ maksimālajam platumam: 800 pikseļi; ) figure.fixedratio (padding-top: 56,25%; /* 450px/800px = 0,5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg;

Pieņemsim, ka jums ir liels fona attēls, kas lieliski izskatās uz darbvirsmas. Taču mobilajā ierīcē tas būs par mazu, tāpēc pareizais risinājums būtu samazināt fona platumu.

Piemēram, attēls ar platumu 800 x 200 pikseļi (4:1) uz maza ekrāna, kura platums ir 300 pikseļi, ir jāsamazina līdz 150 pikseļiem (2:1). Saskaitīsim augstuma un polsterējuma augšdaļas atribūtus:

Attēlā parādīta fona attēla malu attiecība dažādos platumos. Diagrammas slīpums atbilst atribūtam polsterējums-top, un sākuma augstums atbilst augstuma atribūtam. Rezultātā iegūtais kods ir:

Div.column ( /* Fona attēlam jābūt 800 pikseļu platumam */ maksimālajam platumam: 800 pikseļi; ) figure.fluidratio (padding-top: 10%; /* slīpums */ augstums: 120 pikseļi; /* sākuma augstums */ fons- attēls: url (http://voormedia.com/examples/amsterdam.jpg); background-size: vāks; /8 */ )

/* Aprēķināt šķidruma attiecību, pamatojoties uz diviem izmēriem (platums/augstums) */ @mixin fluid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -small: nth($small-size, 1) $augstums-liels: nth($height-small: nth($small-size, 2); / ($width-small: $height-small - $slope * 100% - moz-fona izmērs; /* Firefox 3.6 */ background-position: center /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Šī elementa plūsmas attiecība būs no 4:1 pie 800 pikseļiem līdz 2:1 pie 300 pikseļiem. */ @include fluid-ratio (800px 200px, 300px 150px): url(http://voormedia.com/examples/amsterdam.jpg);

Katrs tīmekļa dizaineris zina, ka adaptīva izkārtojuma izveide, iespējams, ir viens no grūtākajiem uzdevumiem, ar ko viņš var saskarties savā darbā. Problēma nav tikai tā, ka ir jāņem vērā dažādu ierīču ekrāna izmēru īpatnības un jāizvēlas bloku izvietojums vietnē tā, lai tīmekļa projekts izskatītos skaisti gan datora ekrānā, gan mobilajā ierīcē. tālruni, bet ka daudzām mūsdienu ierīcēm ir tādi tā sauktie “tīklenes” monitori ar paaugstinātu pikseļu blīvumu, kuriem ir īpašas prasības tīmekļa izkārtojumam.

Fakts ir tāds, ka “tīklenes” ekrāni nodrošina attēlus ar lielāku skaidrību, jo pikseļu punkti, kas veido attēlus, ir dubultoti. Taču šim uzlabojumam ir arī savi mīnusi, un būtiskākais no tiem ir tas, ka tagad ir nepieciešams papildus izvēlēties augstas izšķirtspējas ilustrācijas tieši tīklenes monitoriem. Ir dažādi risinājumi, lai panāktu augstu attēla skaidrību gan parastajās, gan tīklenes ierīcēs. Apskatīsim dažus piemērus.

Bieži vien web dizainā tiek izmantots viens un tas pats noteikta izmēra attēls, kuram ir iestatīts maksimālais displeja izmērs uz ekrāna, kas ir divas vai vairākas reizes mazāks par tā sākotnējo izmēru.

Vienkāršs piemērs: pieņemsim, ka vēlaties, lai jūsu 250 x 250 pikseļu logotips tiktu pareizi parādīts ekrānā ar dubultu pikseļu blīvumu. Tādā gadījumā ir jāizveido cits logotipa attēls, kura izmērs ir divas reizes lielāks par ekrānā redzamo, t.i. 500 x 500 pikseļi.

Tagad jāatrisina galvenā problēma – kā nodrošināt, lai attēla displejs vienmēr paliktu nemainīgs, t.i., tā izmērs vienmēr ir 250 x 250 px?

Varbūt kāds uzreiz nāca klajā ar ideju uzrakstīt vienkāršu CSS kodu, apmēram šādi:

Attēls (maksimālais platums: 250 pikseļi; )

Savādi, ka šī metode nedarbosies. Jums ir jāierobežo konteinera, kurā ir attēls, izmērs, nevis pats attēls. Tam vajadzētu izskatīties apmēram šādi:

Div img (maksimālais platums: 250 pikseļi; )

Kādi ir šīs metodes trūkumi?

Ja izmantojat šo izkārtojuma metodi maziem attēliem, piemēram, logotipiem vai ikonām, jūs, visticamāk, nesaskarsities ar problēmām. Tomēr šī metode nav piemērota lielām ilustrācijām. Vai jums nepatīk lejupielādēt milzīgus attēlus tieši tīklenes ierīcēm, kas pat nespēs parādīt visas jūsu ilustrācijas detaļas?!

Padomājiet par savas vietnes apmeklētājiem. Ko jūs sakāt cilvēkam, kurš steidzas mēģina nolasīt svarīgu informāciju no jūsu tīmekļa resursa, pieslēdzoties, izmantojot USB modemu, kas ļoti labi neuztver sakaru signālu? Protams, jūs varat zaudēt noteiktu auditorijas daļu, ja nedomājat, kā pareizi izveidot savai vietnei adaptīvu dizainu.

Starp citu, ja vēlaties nedaudz mainīt vietnes dizainu atkarībā no savienojuma ātruma klienta pusē, varat izmantot īpašu Adam Bradley utilītu Foresight.js, kas mēra 50K attēla ielādes ātrumu.

Vēl viens metodes trūkums ir tas, ka parasta monitora un mobilā tālruņa ekrāna malu attiecība atšķiras. Tāpēc fona attēls, kas ir izstiepts horizontāli, izskatīsies diezgan dīvaini, ja tiks samazināts, lai tas atbilstu mobilā tālruņa ekrāna platumam, atstājot apakšā daudz tukšas vietas. Mobilā telefona gadījumā būs labāk, ja tīmekļa pārzinim būs iespēja palielināt attēlu, izcelt būtisku tā daļu un novietot šo attēla fragmentu kā fonu, nevis visu attēlu.

Taču ir liels skaits alternatīvu, kas ļauj pielāgot attēlus ekrāna izšķirtspējai, nepārslogojot sakaru kanālu vai nepalēninot vietnes apmeklētāja ierīces darbību.

Lielākā daļa šo metožu balstās uz skriptu kombināciju, kas darbojas gan klienta, gan servera pusē. Pirmais no tiem, kas rakstīts javascript, uzzina visu par vietnes apmeklētāja izmantotās ierīces īpašībām un interneta savienojuma ātrumu, otrā atkarībā no saņemtās informācijas var ielādēt nepieciešamās kvalitātes attēlu.

Mūsdienu izstrādātāji ir izveidojuši diezgan lielu skaitu skriptu, kas veic līdzīgas funkcijas. Kā piemēru var minēt īpašo Jquery skriptu HiSRC, ko izstrādājuši Marks Grabanskis un Kristofers Šmits, kas ļauj katram attēlam lejupielādēt vienu opciju no trim atkarībā no lietotāja ierīces veida un interneta savienojuma ātruma.

Kopumā šī skripta HTML marķējums izskatās šādi:

Atribūtā src ir jānorāda ceļš uz failu ar attēlu, kas tiek ielādēts pirmais, parasti ar zemāko kvalitāti. Pēc lapas ielādes skripts pārbaudīs interneta savienojuma ātrumu un ierīces ekrāna veidu, no kuras apmeklētājs piekļuva vietnei. Ja interneta ātrums atļauj un ierīce atbalsta “tīklenes” attēlus, tiks ielādēta bilde, kas atrodas datu-2x atribūtā norādītajā adresē, ja ierīce atbalsta parastos attēlus, attēls tiks ielādēts datos norādītajā adresē- 1x atribūts, un, ja tas neļaus interneta ātrumu, izmaiņas netiks veiktas. Attēlam pievienota īpaša klase pateiks skriptam, ka šajā DOM elementā ir jāveic noteiktas transformācijas.

Pats skripts ir savienots, pievienojot kodu:

$(dokuments).ready(function())( $(.hisrc").hisrc(); ));

Viss ir ļoti vienkārši un neprasa nekādas papildu grūtības. Viss, kas jums jādara, ir jāizvēlas trīs dažādi attēli, ko ielādēt dažādās situācijās, un jūsu vietne būs gatava darbam. Īpaši mobilajām ierīcēm varat izveidot atsevišķu attēla versiju ar mainītām proporcijām.

Metodei ir arī vairāki trūkumi. Pirmkārt, jums papildus jāiekļauj Jquery bibliotēka. Otrkārt, metodei ir nepieciešams īpašs HTML marķējums, kas var nebūt piemērots visiem tīmekļa pārziņiem, jo ​​dažos gadījumos tagu parādīšanas veidu nevar mainīt.

Interesantu veidu, kā izveidot adaptīvus attēlus, piedāvā Sencha.io Src serviss (šī raksta tapšanas brīdī vēl funkcionē), kam vispār nav nepieciešami nekādi iestatījumi serverī. Pakalpojums darbojas uz starpniekservera pamata.

Vienkārši ievietojiet prefiksu http://src.sencha.io/ pirms attēla adreses atribūtā src, un Sencha.io Src parūpēsies par pārējo. Šis ir bezmaksas pakalpojums, kas ļauj atrisināt lielāko daļu mūsdienu tīmekļa dizainera problēmu.

Pakalpojuma trūkumi ietver to, ka, izmantojot to, jūs padarāt sevi atkarīgu no trešās puses resursa darbības, kas ietekmēs jūsu vietni, tāpēc NEIESAKU to izmantot, un ne tikai to, bet jebkuras trešās puses pakalpojumu vispārīgajos Pakalpojumos.

Kā redzat, patiešām ir alternatīvi veidi, kā sagatavot atsaucīgus attēlus vietnēm. Šajā rakstā nebija uzskaitītas visas mūsdienu lietotājiem pieejamās metodes. Ar katru dienu pieaug to pakalpojumu un spraudņu skaits, kas ļauj kontrolēt attēla izšķirtspēju atkarībā no to ierīču īpašībām, kurās tiek skatīta vietne. Tīmekļa meistariem neatliek nekas cits, kā pārbaudīt katru no tiem un izvēlēties vienu vai otru metodi atkarībā no aktuālajiem uzdevumiem.

Adaptīvo attēlu problēma ir diezgan aktuāla, tāpēc es sākšu ar nelielu argumentāciju un ieviešanas metodēm, un tad izcelšu iespēju, kas, manuprāt, ir vispiemērotākā.

Tātad, apmēram pirms gada es domāju, ka, lai attēlu padarītu atsaucīgu (tas ir, lai tas izstieptos vai sarautos, lai tas atbilstu konteinera platumam), jums tikai jāizmanto šāds kods:

Iesaiņojuma attēls (platums: 100%;)

Un patiešām, dažos gadījumos to var ierobežot. Šis triks lieliski darbojas, kad pārlūkprogrammas logs kļūst mazāks. Bet ko darīt, ja konteinera platums, kurā atrodas attēls, kļūst lielāks par attēla izšķirtspēju? Pa labi. Attēls stiepjas visā konteinera platumā, taču kvalitāte atstāj daudz vēlamo. Bet ko darīt, ja jums ir nepieciešams atbalsts izšķirtspējai 2048 x 1536 pikseļi?

Ja neizmantojat svg un tas ir rastra attēls, tad pirmais, kas nāk prātā, ir uzņemt attēlu, kas atbilstu galvenajai lapas maksimālajai izšķirtspējai, un, mainot pārlūkprogrammas loga izmēru, tas tiks saspiests ar normāla kvalitāte.

Un tad rodas veiktspējas problēma. Ir stulbi viedtālrunim ielādēt tik lielus attēlus, kas izskatās labi ar tīklenes izšķirtspēju. Galu galā mobilo tīklu ātrums nav tik liels kā personālajam datoram, un daži lietotāji var negaidīt, kad viedtālrunī tiks ielādēta galvenā lapa. Rezultāts ir zaudēts klients.

Varat mēģināt iestatīt vairākus divelementus ar attēliem un pēc tam, izmantojot multivides vaicājumus, paslēpt nevajadzīgos un rādīt tikai to attēlu, kas atbilst pašreizējai izšķirtspējai.

Šķiet, ka problēma ir atrisināta. Bet fakts ir tāds, ka pārlūkprogrammas, lai paātrinātu lapas parādīšanu, pirms css apstrādes sāk ielādēt attēlus, kas ir ierakstīti html. Varbūt es neizteicos gluži pareizi (izlabojiet mani), bet, ja jūs izpildīsit šo triku, visi attēli joprojām tiks ielādēti neatkarīgi no tā, kas rakstīts css. Tas nozīmē, ka esam tikai pasliktinājuši situāciju mobilajās ierīcēs. Tagad viņiem būs jāaugšupielādē nevis viens, bet vairāki attēli.

To var pārbaudīt, atverot izstrādātāja rīkus un apskatot cilni “Tīkls”.

Kopumā joprojām ir daudz problēmu, kas var rasties, veidojot adaptīvus attēlus. Un arī ir sakrājies diezgan daudz risinājumu. Tas viss ir atkarīgs no konkrētās situācijas.

HTML 5 parādījās attēla tags, kas ļauj atrisināt lielāko daļu problēmu un tika izveidots īpaši adaptīva (responsīva) dizaina izveidei. Tās dizains atgādina video un audio tagus. Darba būtība ir tāda, ka attēla tagā ir norādīti vairāki attēli noteiktām ekrāna izšķirtspējām. Tas izskatās apmēram šādi:

Īpatnība ir tāda, ka src vietā tiek izmantots srcset un tiek izmantots kaut kas līdzīgs multivides vaicājumiem. Neliels attēls tiek ielādēts ar izšķirtspēju, kas mazāka par 319 pikseļiem. Vidējais attēls ar izšķirtspēju no 320 pikseļiem līdz 480 pikseļiem utt.

Kopumā, izmantojot jaunus tagus, iesaku apskatīt šo vietni un pārbaudīt pašreizējo situāciju.

Kā redzat, pašreizējā situācija atstāj daudz ko vēlēties. Nav atbalsta IOS ierīcēs, Macbook(-os) un IE (lai gan IE lietotājiem viņus nav žēl, viņiem ir jācieš). Es domāju, ka mēs visi neesam gatavi zaudēt tik daudz lietotāju. Nē, es to izteicu nepareizi. Nezaudējiet to, jo mūsu galvenais attēls tiks ielādēts un parādīts pareizi. Tomēr es vēlos nezaudēt klientus ar Apple tehnoloģiju garo lapu ielādes laiku dēļ, jo tā, visticamāk, ir maksātspējīga auditorija

Lai tagad izmantotu šī taga sniegtās priekšrocības, jums ir jāizmanto neliels skripts (starp head tagiem) picturefill.js .

Tagad visām ierīcēm ir jāatbalsta šī adaptīvo attēlu izkārtojuma struktūra. Tiesa, es to neesmu testējis uz Mac (man tāda vēl nav).

Atšķirībā no iepriekš aprakstītās metodes, tagad tiek ielādēts tikai viens attēls, nevis trīs, kā tas bija iepriekš.