Hammaga salom! Moslashuvchan tartib, panjara nima ekanligini va shriftlarni qanday moslashtirish kerakligini tushundik. Endi tasvirlarni qanday moslashtirishni ko'rib chiqamiz.

Bu aslida juda oddiy mavzu va bu bizga ko'p vaqt talab qilmaydi.

Tasvirlaringizni sezgir qilish uchun ularga max-width=100% xususiyatini qo'shishingiz kifoya.

rasm (
maksimal kenglik: 100%;
}

Hammasi! Endi bizning rasmimiz ota-konteynerdan tashqariga chiqmaydi va ekran o'lchamlariga qarab moslashadi.

Tasvirlardan tashqari, ushbu texnikadan videolar va boshqa media fayllar uchun ham foydalanishingiz mumkin.

Tasvir, joylashtirish, obyekt, video (
maksimal kenglik: 100%;
}

Hammasi yaxshi bo'lardi, lekin bu faqat IE7+ da ishlaydi. Agar siz IE6 ni qo'llab-quvvatlashingiz kerak bo'lsa, u holda bu xususiyat quyidagi yozuvda ishlaydi:

rasm (
kengligi: 100%;
}

Bular. Maksimal kenglik o'rniga width ni yozing.

Siz duch kelishi mumkin bo'lgan yana bir muammo - bu Windows-da tasvirni yomon o'lchash. Ha, brauzerda emas, aynan tizimda. Agar diqqat bilan qarasangiz, ba'zi artefaktlarni ko'rishingiz mumkin.

IE uchun bu muammoni hal qilish juda oddiy.

Logotip (
fon: yo'q;
filtr: progid: DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}

Bular. Filtr xususiyati bu muammoni hal qilishga yordam beradi.

Ta'sirchan tarmoqqa ega bo'lganingizdan so'ng, javob berish uchun ba'zi manipulyatsiyalarni talab qiladigan boshqa veb-sahifa tarkibini ko'rib chiqish vaqti keldi. Biz tasvirlar va videolar haqida gapiramiz. Agar siz shunchaki veb-sahifaga rasm qo'shsangiz va brauzer oynasini kichraytirsangiz, tasvir oynaning kengligiga moslashmasligini, balki asl o'lchamlarini saqlab qolishini ko'rasiz. Bu gorizontal aylantirishga olib kelishi va tasvirning sezgir ustundan tashqariga chiqishiga olib kelishi mumkin:

CSS yordamida tasvirni qanday qilib sezgir qilish mumkin? Birinchidan, siz tasvir yorlig'idan (agar mavjud bo'lsa) kenglik va balandlik atributlarini olib tashlashingiz kerak bo'ladi. Sizning HTML kodingiz ularni o'z ichiga olmaydi:

Uslublar jadvalingizga quyidagi yozuvni qo'shing:

Img (maksimal kenglik: 100%; )

Bu maksimal teg kengligi degan ma'noni anglatadi u joylashgan konteyner blokining kengligiga teng bo'ladi. Rasm ota-ona chegarasidan tashqariga chiqa olmaydi va agar ota-onaning kengligi o'zgarsa, u avtomatik ravishda unga moslashadi.

Xuddi shu tarzda, siz tasvir kengligini, masalan, asosiy konteyner kengligining yarmiga teng qilishingiz mumkin:

Rasm (maksimal kenglik: 50%; )

, va , va , teglarini sezgir qilish uchun tasvirlar uchun qilganingiz kabi ular uchun CSS kodini qo'shing. Barcha selektorlarni bir vaqtning o'zida ro'yxatga olish tavsiya etiladi:

Img, video, joylashtirish, ob'ekt (maksimal kenglik: 100%; )

dan foydalanib video joylashtirsangiz, ishlar yanada murakkablashadi. Keyin yuqoridagi usul bu erda ishlamaydi. Siz JavaScript yoki yanada aqlli CSS kodiga murojaat qilishingiz kerak bo'ladi.

Agar siz ikkinchi variantni tanlagan bo'lsangiz, tegni qo'shimcha idishga joylashtirishingiz kerak bo'ladi. Masalan:

Keyin quyidagi CSS kodini qo'shing:

Video (balandlik: 0; joylashuv: nisbiy; to‘ldirish-pastki: 56,25%; ) .video iframe (pozitsiya: mutlaq; chap: 0; tepa: 0; kenglik: 100%; balandlik: 100%; )

Siz sezganingizdek, kodda 56,25% g'alati qiymatga ega bo'lgan padding-bottom xususiyati mavjud. Bu nimani anglatadi? Foiz sifatida belgilangan padding-pastki qiymati blokning kengligiga nisbatan hisoblanadi. Biz o'rnatilgan videoning tomonlar nisbatini (16:9) aniqlash va qisqa tomon raqamini uzun tomon raqamiga bo'lish va natijani 100 ga ko'paytirish orqali 56,25 raqamini oldik.

Moslashuvchan tartibdagi asosiy vazifalardan biri tasvirlarni (shu jumladan fon rasmlarini) turli ekran o'lchamlari bo'lgan qurilmalarda to'g'ri ko'rsatilishi uchun masshtablashdir.

Img yorlig'idagi tasvirlar bilan hamma narsa oddiy: kenglikni foiz sifatida o'rnatganingizda, balandlik avtomatik ravishda o'lchanadi. Ushbu usulni fon rasmlariga qo'llash mumkin emas.

Bu hiyla elementni to'ldirish uchun foiz qiymatini o'rnatishdir. Usul birinchi bo'lib eski blogdagi A List Apart maqolasida nashr etilgan, ammo u hali ham yaxshi ishlaydi.

Aytaylik, sizda 800x450 piksel o'lchamdagi fon tasviri bor va siz uni 16:9 qat'iy nisbati bilan fon qilmoqchisiz. Quyidagi kod chekinish uchun px dan foydalanadi, lekin u em bilan ham ishlaydi. HTML5 figura elementi ham mavjud; uni eski brauzerlarda to'g'ri ishlashi uchun siz HTML5 shiv dan foydalanishingiz mumkin.

Div.column (maksimal kenglik: 800px; ) figure.fixedratio (toʻldiruvchi-usti: 56,25%; /* 450px/800px = 0.5625 */ )

Div.column ( /* Fon rasmi kengligi 800px boʻlishi kerak */ max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg); fon o'lchami: qopqoq; -moz-fon o'lchami: qopqoq; /* Firefox 3.6 */ fon pozitsiyasi: markaz; /* Internet Explorer 7/ 8 */)

Aytaylik, sizda ish stolida ajoyib ko'rinadigan katta fon tasviri bor. Ammo mobil qurilmada u juda kichik bo'ladi, shuning uchun to'g'ri yechim fonning kengligini kamaytirish bo'ladi.

Masalan, kengligi 800 dan 200 pikselga (4: 1) kichik ekranda, kengligi 300 piksel bo'lgan tasvirni 150 pikselga (2: 1) kamaytirish kerak. Keling, balandlik va padding-top atributlarini hisoblaymiz:

Rasmda turli xil kenglikdagi fon tasvirining tomonlar nisbati ko'rsatilgan. Grafikning qiyaligi padding-top atributiga, boshlanish balandligi esa balandlik atributiga mos keladi. Olingan kod:

Div.column ( /* Fon rasmi kengligi 800px boʻlishi kerak */ maksimal kenglik: 800px; ) figure.fluidratio ( toʻldiruvchi-usti: 10%; /* qiyalik */ balandlik: 120px; /* boshlanish balandligi */ fon- rasm: url(http://voormedia.com/examples/amsterdam.jpg); fon o'lchami: qopqoq; -moz-background-size: qopqoq; /* Firefox 3.6 */ fon pozitsiyasi: markaz; /* Internet Explorer 7/8 */)

/* Ikki oʻlcham (kenglik/balandlik) asosida suyuqlik nisbatini hisoblang */ @mixin suyuqlik nisbati($katta oʻlcham, $kichik oʻlcham) ( $kenglik-katta: nth($katta oʻlcham, 1); $kenglik -kichik: n-($kichik o'lcham, 1); $balandlik-katta: n-chi($katta o'lcham, 2); $balandlik-kichik: n-chi($kichik o'lcham, 2); $qiyalik: ($balandlik- katta - $balandlik-kichik) / ($kenglik-katta - $kenglik-kichik); $balandlik: $balandlik-kichik - $kenglik-kichik * $qiyalik; padding-top: $qiyalik * 100%; balandlik: $balandlik ; fon o'lchami: qopqoq; -moz-fon o'lchami: qopqoq; /* Firefox 3.6 */ fon-pozitsiya: markaz; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Bu element suyuqlik nisbatiga ega bo'ladi. 800px da 4:1 dan 300px da 2:1 gacha. */ @suyuqlik nisbati (800px 200px, 300px 150px); fon rasmi: url(http://voormedia.com/examples/amsterdam.jpg); )

Har bir veb-dizayner sezgir tartibni yaratish, ehtimol, u o'z ishida duch kelishi mumkin bo'lgan eng qiyin vazifalardan biri ekanligini biladi. Muammo nafaqat turli xil qurilmalarning ekran o'lchamlarining o'ziga xos xususiyatlarini hisobga olish va veb-loyiha kompyuter ekranida ham, mobil telefonda ham chiroyli ko'rinadigan tarzda saytdagi bloklarni joylashtirishni tanlash kerak. telefon, ammo ko'pgina zamonaviy qurilmalarda veb-layzeri uchun maxsus talablar mavjud bo'lgan piksel zichligi yuqori bo'lgan "retina" monitorlari mavjud.

Gap shundaki, "retina" ekranlari rasmlarni tashkil etuvchi piksel nuqtalarining ikki marta zichlashishi tufayli tasvirlarni yuqori ravshanlik bilan ta'minlaydi. Ammo bu yaxshilanishning salbiy tomonlari ham bor va ularning eng muhimi shundaki, endilikda retina monitorlari uchun yuqori aniqlikdagi illyustratsiyalarni qo'shimcha ravishda tanlash zarur. Oddiy va retina qurilmalarida yuqori tasvir ravshanligiga erishish uchun turli xil echimlar mavjud. Keling, ba'zi misollarni ko'rib chiqaylik.

Ko'pincha veb-dizaynda ma'lum o'lchamdagi bir xil tasvir ishlatiladi, buning uchun ekrandagi maksimal displey o'lchami o'rnatiladi, bu uning asl hajmidan ikki yoki undan ko'p marta kichikdir.

Oddiy misol: deylik, siz 250 x 250 pikselli logotipingiz ikki pikselli zichlikka ega ekranda to'g'ri ko'rsatilishini xohlaysiz. Bunday holda, siz ekranda kerakli o'lchamdagi ikki baravar katta bo'lgan boshqa logotip tasvirini yaratishingiz kerak, ya'ni. 500 x 500 piksel.

Endi biz asosiy muammoni hal qilishimiz kerak - tasvirni ko'rsatish har doim bir xil bo'lib qolishiga qanday ishonch hosil qilish kerak, ya'ni uning o'lchami har doim 250 x 250 piksel?

Ehtimol, kimdir darhol oddiy CSS kodini yozish g'oyasini o'ylab topdi, masalan:

Rasm (maksimal kenglik: 250px; )

G'alati, bu usul ishlamaydi. Tasvirning o'zi emas, balki tasvirni o'z ichiga olgan konteyner hajmini cheklashingiz kerak. Bu shunday ko'rinishi kerak:

Div img (maksimal kenglik: 250px; )

Ushbu usulning kamchiliklari qanday?

Agar siz logotip yoki piktogramma kabi kichik tasvirlar uchun ushbu tartib usulidan foydalansangiz, muammoga duch kelmaysiz. Biroq, bu usul katta rasmlar uchun mos emas. Illüstratsiyangizning barcha tafsilotlarini ko'rsata olmaydigan retina qurilmalari uchun maxsus ulkan tasvirlarni yuklab olishni yoqtirmaysizmi?!

Veb-saytingizga tashrif buyuruvchilar haqida o'ylang. Aloqa signalini unchalik yaxshi ololmaydigan USB-modem orqali ulanib, veb-resursingizdan muhim ma’lumotlarni o‘qishga shoshilayotgan odamga nima deysiz? Albatta, veb-saytingiz uchun sezgir dizaynni qanday qilib to'g'ri yaratish haqida o'ylamasangiz, auditoriyangizning ma'lum bir qismini yo'qotishingiz mumkin.

Aytgancha, agar siz mijoz tomonidagi ulanish tezligiga qarab sayt dizaynini biroz o'zgartirmoqchi bo'lsangiz, 50K tasvirni yuklash tezligini o'lchaydigan Adam Bredlidan maxsus Foresight.js yordam dasturidan foydalanishingiz mumkin.

Usulning yana bir kamchiligi shundaki, oddiy monitor va mobil telefon ekranining nisbati har xil. Shu sababli, gorizontal ravishda cho'zilgan fon tasviri mobil telefon ekranining kengligiga mos keladigan tarzda kichraytirilganda juda g'alati ko'rinadi va pastki qismida juda ko'p bo'sh joy qoladi. Mobil telefonda, agar veb-master tasvirni kattalashtirish, uning muhim qismini ajratib ko'rsatish va butun tasvir o'rniga rasmning ushbu qismini fon sifatida joylashtirish imkoniyatiga ega bo'lsa, yaxshi bo'ladi.

Ammo aloqa kanalini ortiqcha yuklamasdan yoki saytga tashrif buyuruvchi qurilmaning ishlashini sekinlashtirmasdan tasvirlarni ekran o'lchamlariga moslashtirishga imkon beradigan ko'plab alternativalar mavjud.

Ushbu usullarning aksariyati mijoz va server tomonida ishlaydigan skriptlar kombinatsiyasiga tayanadi. Ulardan birinchisi, javascriptda yozilgan, saytga tashrif buyuruvchi tomonidan foydalaniladigan qurilmaning xususiyatlari va Internetga ulanish tezligi haqida hamma narsani bilib oladi, ikkinchisi olingan ma'lumotlarga qarab kerakli sifatdagi rasmni yuklashi mumkin.

Zamonaviy ishlab chiquvchilar shunga o'xshash funktsiyalarni bajaradigan juda ko'p sonli skriptlarni yaratdilar. Masalan, Mark Grabanski va Kristofer Shmitt tomonidan ishlab chiqilgan maxsus JQuery HiSRC skripti, foydalanuvchi qurilmasi turiga va Internetga ulanish tezligiga qarab har bir tasvir uchun uchtadan bitta variantni yuklash imkonini beradi.

Umuman olganda, ushbu skript uchun HTML belgilash quyidagicha ko'rinadi:

src atributida siz avval yuklangan, odatda eng past sifatli tasvirga ega faylga yo'lni belgilashingiz kerak. Sahifani yuklagandan so'ng, skript Internetga ulanish tezligini va tashrif buyuruvchi saytga kirgan qurilmaning ekran turini tekshiradi. Agar Internet tezligi imkon bersa va qurilma "retina" tasvirlarini qo'llab-quvvatlasa, data-2x atributida ko'rsatilgan manzilda joylashgan rasm yuklanadi, agar qurilma oddiy tasvirlarni qo'llab-quvvatlasa, rasm ma'lumotlardagi manzilga yuklanadi- 1x atributi va agar u Internet tezligiga ruxsat bermasa, hech qanday o'zgartirish kiritilmaydi. Rasmga qo'shilgan maxsus sinf skriptga ushbu DOM elementida ma'lum o'zgarishlarni amalga oshirish kerakligini aytadi.

Skriptning o'zi kodni qo'shish orqali ulanadi:

$(hujjat).ready(funksiya())( $(".hisrc").hisrc(); ));

Hammasi juda oddiy va hech qanday qo'shimcha qiyinchiliklarni talab qilmaydi. Turli vaziyatlarda yuklash uchun uchta turli tasvirni tanlash kifoya va saytingiz ishlashga tayyor bo‘ladi. Siz mobil qurilmalar uchun maxsus o'zgartirilgan nisbatlar bilan rasmning alohida versiyasini yaratishingiz mumkin.

Usulning bir qator kamchiliklari ham bor. Birinchidan, JQuery kutubxonasini qo'shimcha ravishda kiritishingiz kerak. Ikkinchidan, usul maxsus HTML belgilarini talab qiladi, bu barcha veb ustalari uchun mos kelmasligi mumkin, chunki ba'zi hollarda -tagni ko'rsatish usulini o'zgartirib bo'lmaydi.

Moslashuvchan tasvirlarni yaratishning qiziqarli usuli Sencha.io Src xizmati tomonidan taklif etiladi (ushbu maqolani yozish paytida hali ham ishlaydi), bu serverda hech qanday sozlamalarni talab qilmaydi. Xizmat proksi-server asosida ishlaydi.

Shunchaki src atributiga rasmingiz manzili oldiga http://src.sencha.io/ prefiksini kiriting, qolganlari bilan Sencha.io Src shug‘ullanadi. Bu zamonaviy veb-dizaynerning aksariyat muammolarini hal qilish imkonini beruvchi bepul xizmatdir.

Xizmatning kamchiliklari shundan iboratki, undan foydalanish orqali siz o'zingizni uchinchi tomon resursining ishlashiga bog'liq bo'lasiz; uning ishlashidagi har qanday nosozliklar saytingizga ta'sir qiladi, shuning uchun men undan foydalanishni TAVSIYA ETMAMAN, va nafaqat, lekin umumiy xizmatlardagi har qanday uchinchi tomon.

Ko'rib turganingizdek, veb-saytlar uchun sezgir tasvirlarni tayyorlashning muqobil usullari mavjud. Ushbu maqola zamonaviy foydalanuvchilar uchun mavjud bo'lgan barcha usullarni sanab o'tmadi. Veb-sayt ko'riladigan qurilmalarning xususiyatlariga qarab tasvir o'lchamlarini nazorat qilish imkonini beruvchi xizmatlar va plaginlar soni kundan-kunga ortib bormoqda. Veb-ustalarning har birini sinab ko'rishdan va ular oldida turgan dolzarb vazifalarga qarab u yoki bu usulni tanlashdan boshqa iloji yo'q.

Moslashuvchan tasvirlar muammosi juda dolzarb, shuning uchun men biroz mulohaza yuritish va amalga oshirish usullaridan boshlayman, keyin menimcha, eng mos keladigan variantni ta'kidlayman.

Shunday qilib, taxminan bir yil oldin men tasvirni sezgir qilish uchun (ya'ni, uni idishning kengligiga mos ravishda cho'zish yoki kichraytirish) uchun quyidagi koddan foydalanish kerak, deb o'yladim:

O'rash img (kengligi: 100%; )

Va, albatta, ba'zi hollarda bu cheklanishi mumkin. Ushbu hiyla brauzer oynasi kichrayganda ajoyib ishlaydi. Ammo tasvir joylashgan idishning kengligi tasvir o'lchamlaridan kattaroq bo'lsa-chi? To'g'ri. Tasvir idishning kengligi bo'ylab cho'ziladi, ammo sifat ko'p narsani talab qiladi. Agar sizga 2048 x1536 piksel o'lchamdagi yordam kerak bo'lsa nima bo'ladi?

Agar siz svg dan foydalanmasangiz va bu rastrli tasvir bo'lsa, birinchi navbatda ochiladigan sahifaning maksimal ruxsatiga mos keladigan tasvirni olish kerak va brauzer oynasining o'lchamini o'zgartirganda, u bilan siqiladi. normal sifat.

Va keyin ishlash muammosi paydo bo'ladi. Smartfonning retinaning aniqligida yaxshi ko'rinadigan bunday katta tasvirlarni yuklashi ahmoqlikdir. Axir, mobil tarmoqlarning tezligi shaxsiy kompyuternikidek yuqori emas va ba'zi foydalanuvchilar o'z smartfoniga ochilish sahifasi yuklanishini kutmasligi mumkin. Natijada yo'qolgan mijoz.

Siz rasmlar bilan bir nechta divlarni belgilashga urinib ko'rishingiz mumkin, keyin esa media so'rovlaridan foydalanib, keraksizlarini yashirishingiz va faqat joriy ruxsatga mos keladigan rasmni ko'rsatishingiz mumkin.

Muammo hal qilinganga o‘xshaydi. Ammo haqiqat shundaki, brauzerlar sahifani ko'rsatishni tezlashtirish uchun CSS-ni qayta ishlashni boshlashdan oldin html-da yozilgan rasmlarni oldindan yuklaydi. Ehtimol, men o'zimni to'g'ri ifoda eta olmadim (meni to'g'rilang), lekin agar siz ushbu hiyla-nayrangni bajarsangiz, CSS-da nima yozilganidan qat'i nazar, barcha tasvirlar hali ham yuklanadi. Bu shuni anglatadiki, biz mobil qurilmalar uchun vaziyatni faqat yomonlashtirdik. Endi ular bitta emas, bir nechta rasmni yuklashlari kerak bo'ladi.

Buni ishlab chiquvchi vositalarini ochib, "Tarmoq" yorlig'iga qarab tekshirishingiz mumkin.

Umuman olganda, moslashuvchan tasvirlarni yaratishda hali ham ko'plab muammolar paydo bo'lishi mumkin. Va juda ko'p echimlar ham to'plangan. Bularning barchasi muayyan vaziyatga bog'liq.

Html 5 da rasm yorlig'i paydo bo'ldi, bu sizga ko'p muammolarni hal qilishga imkon beradi va moslashtirilgan (reaktiv) dizaynni yaratish uchun maxsus yaratilgan. Uning dizayni video va audio teglarni eslatadi. Ishning mohiyati shundaki, ma'lum bir ekran o'lchamlari uchun rasm tegi ichida bir nechta tasvirlar ko'rsatilgan. Bu shunday ko'rinadi:

O'ziga xosligi shundaki, src o'rniga srcset ishlatiladi va media so'rovlariga o'xshash narsa ishlatiladi. Kichik rasm 319px dan kam ruxsatda yuklanadi. 320px dan 480px gacha boʻlgan oʻrtacha tasvir va h.k.

Umuman olganda, yangi teglardan foydalanganda, men ushbu saytga qarashni va narsalarning hozirgi holatini tekshirishni tavsiya qilaman.

Ko'rib turganingizdek, hozirgi vaziyat juda ko'p narsani orzu qiladi. IOS qurilmalarida, Macbook(lar) va IE-da qo'llab-quvvatlanmaydi (garchi IE foydalanuvchilari ularga achinmasalar ham, ular azoblanishi kerak). O'ylaymanki, biz hammamiz juda ko'p foydalanuvchilarni yo'qotishga tayyor emasmiz. Yo'q, men buni noto'g'ri ifodaladim. Uni yo'qotmang, chunki bizning asosiy rasmimiz yuklanadi va to'g'ri ko'rsatiladi. Ammo shunga qaramay, men sahifalarni yuklashning uzoq vaqtlari tufayli olma texnologiyasi bilan mijozlarni yo'qotmaslikni xohlayman, chunki bu, ehtimol, hal qiluvchi auditoriya.

Ushbu tegdan hozir foydalanish uchun siz kichik skriptdan (bosh teglar orasidagi) picturefill.js dan foydalanishingiz kerak.

Endi barcha qurilmalar moslashtirilgan tasvirlarni joylashtirish uchun ushbu tuzilmani qo'llab-quvvatlashi kerak. To'g'ri, men uni Mac-da sinab ko'rmadim (menda hali yo'q).

Yuqorida tavsiflangan usuldan farqli o'laroq, endi oldingidek uchta emas, faqat bitta rasm yuklanadi.