Tarkib
- 01. Media-so'rovlarni qo'shish
- 02. Media-so'rov anatomiyasi
- 03. Yana bir narsa…
- 04. To'xtash nuqtalarini tanlash
- 05. Kichik rasmlarimizni sozlash
- 06. Faqat kenglik emas
- Bilim zarur: O'rta CSS va HTML
- Talab qiladi: Matn muharriri, zamonaviy brauzer, grafik dasturiy ta'minot
- Loyiha vaqti: 1 soat (jami 5 soat)
- Qo'llab-quvvatlash fayli
CSS spetsifikatsiyasining nisbatan yangi qismi, media-so'rovlar, shubhasiz, javob beradigan veb-dizaynning eng hayajonli tomoni va keyingi eksperimentlar uchun etuk maydon.
Moslashuvchan maketlarga bo'lgan ehtiyojni qabul qilib, ba'zilari ommaviy axborot so'rovlarini mavjud bo'lgan belgilangan kenglikdagi saytlarga moslashuvchan maketlarni takomillashtirish vositasi sifatida qarashdi. Javob beruvchi tartiblarni qabul qilganlar orasida, ko'pchilik ish stoli nuqtai nazaridan buni amalga oshirdi, chunki ko'rish oynasi torayib borishi bilan tarkib va xususiyatlarni yashirdi.
Ushbu o'quv qo'llanma davomida biz muqobil usulda, birinchi navbatda, mobil usulni qo'lladik. Endi media-so'rovlarni kiritishni istasak, o'ylashimiz mumkin qo'shish ekranning ko'chmas mulki o'sib borishi kabi xususiyatlar, shuni bilishimiz mumkinki, bizning saytimiz asosidagi dizayn va dizayn obro'li boshlang'ich bazani taqdim etadi.
Bugun biz naqsh portfelimizdan tashqariga chiqamiz va veb-saytimiz uchun zarur bo'lgan alohida sahifalarni yaratamiz. Bunda biz media-so'rovlar qanday tuzilganligini ko'rib chiqamiz va ularni haqiqatan ham javob beradigan tarzda amalga oshiramiz.
01. Media-so'rovlarni qo'shish
Bizning naqsh portfelimizdagi tarkibiy qismlar to'liq va har qanday maket doirasidan tashqarida ishlayotganligi sababli ularni saytimizning turli sahifalariga ko'chirish vaqti keldi.
Bosh sahifamizdan boshlaymiz. Ish stoliga yo'naltirilgan dizayndan biz yanada keng ko'rinishda bizning maketimiz quyidagicha ko'rinishini ko'rishimiz mumkin:
Dizaynimizdan o'lchovlarni olib, CSS-da hujjat maydonini quyidagicha tavsiflashimiz mumkin:
.document {
to'ldirish: 0 5%;
}
.main {
kengligi: 74.242424242424%; / * 784/1056 * /
suzuvchi: chap;
}
. qo'shimcha {
kengligi: 22.727272727273%; / * 240/1056 * /
suzuvchi: o'ng;
}
Ushbu qo'llanmaning ikkinchi qismida bilib olganimizdek, ushbu ustunlarning foiz kengligini hisoblash uchun quyidagi formuladan foydalanmoqdamiz:
(maqsad / kontekst) * 100 = natija
Bizning brauzerimiz o'lchamini o'zgartirganda, biz ish stoli tartibi eng kichik o'lchamdagi ekrandan eng kattagacha o'lchamlarini ko'rayapmiz. Albatta, kichik o'lchamlarda ustunlar juda tor va chiziq uzunliklari shunchalik qisqa, chunki tarkib o'qish qiyin. Biz ushbu tartibni ishlash uchun etarli joy mavjud bo'lganda istaymiz.
Bu erda media-so'rovlar keladi. Ushbu tartib faqat brauzer 768px dan kengroq bo'lganda kuchga kiradi deb o'ylab, biz quyidagi CSS-ni qo'shishimiz mumkin:
.document {
to'ldirish: 0 5%;
}
@media ekrani va (min en: 768px) {
.main {
kengligi: 74.242424242424%; / * 784/1056 * /
suzuvchi: chap;
}
. qo'shimcha {
kengligi: 22.727272727273%; / * 240/1056 * /
suzuvchi: o'ng;
}
}
Endi, ko'rish maydoni 768 pikseldan torroq bo'lganda, media-so'rov ichidagi hamma narsa e'tiborga olinmaydi. Media so'rovlarini qo'llab-quvvatlamaydigan har qanday brauzer buni e'tiborsiz qoldiradi.
02. Media-so'rov anatomiyasi
Bu erda nima bo'layotganini tushunish uchun, media-so'rov qanday tuzilganligini ko'rib chiqamiz. Biz uni ikki qismga bo'lishimiz mumkin:
- @media ekrani: Media-so'rovning birinchi qismi bu media turi. Agar siz CSS-ga bosib chiqarish uslublarini qo'shgan bo'lsangiz, ushbu sintaksisni tanib olishingiz mumkin. Siz shuningdek, nom nomini ommaviy axborot vositalari xususiyati havola> element. Buning sababi, ikkalasi ham CSS 2.1 spetsifikatsiyasida topilgan ommaviy axborot vositalarining tasdiqlangan to'plamini qabul qiladilar.
- (min en: 768px): Ikkinchi qism so'rov. Bunga quyidagilar kiradi xususiyati so'ralishi kerak (bu holda ko'rinish oynasining minimal kengligi) va mos keladigan qiymat (768px) uchun sinov qilish.
Tezkor veb-dizayn haqida gapirganda, kenglikka e'tibor qaratish tendentsiyasi mavjud, ammo biz boshqa xususiyatlarni ham sinab ko'rishimiz mumkin:
- (min- | max-) kengligi va (min- | max-) balandligi: Bular ko'rish maydonining kengligi va balandligini so'rashga imkon beradi (ya'ni brauzer oynasi).
- (min- | max-) qurilma kengligi va (min- | max-) qurilma balandligi: Bular butun displeyning kengligini so'rashga imkon beradi. Mening tajribamga ko'ra, maketlarni displeyga emas, balki ko'rinish oynasida joylashtirish oqilona.
- yo'nalish: Siz darhol bu erda imkoniyatlar haqida o'ylashingiz mumkin; telefoningiz yo'nalishiga qarab turli xil tarkibni ko'rsatadigan dasturlarni o'ylab ko'ring - Internetda ham shunday bo'lishi mumkin.
- (min- | max-) tomonlar nisbati: Bu bizga tartiblarni brauzer oynasi nisbati asosida moslashtirishga imkon beradi ...
- (min- | max-) qurilma tomonlar nisbati: … Va bu bizga qurilma tomonlari nisbati asosida xuddi shunday qilishga imkon beradi. Ouen Gregori o'tgan yili ajoyib maqola yozgan edi, unda biz ushbu so'rov yordamida dizaynlarimizni ular paydo bo'ladigan qurilmalarga bog'lab qo'yishimiz mumkin.
- (min- | max-) monoxrom: Shuningdek, biz qurilmaning monoxrom displeyga ega yoki yo'qligini tekshirib ko'rishimiz mumkin. Agar Amazon elektron siyoh Kindle qurilmalari yolg'on gapirmasa va ularning ekranlari rangli ekanligi haqida xabar berishsa, bu qanchalik foydali bo'lishini tasavvur qiling!
So'rovimizning oxirgi qismi, ehtimol, eng foydali bo'lishi mumkin. Foydalanish orqali va, biz bitta so'rovda bir nechta xususiyatlarni sinab ko'rishimiz mumkin. Masalan:
@media ekrani va (min en: 768px) va (orientatsiya: landshaft) {
...
}
Ko'rib turganingizdek, ommaviy axborot vositalarining so'rovlari bizni etarlicha majburiy tajribalarni yaratishda yordam beradi - va men faqat sirtga tegdim. Agar siz yotishdan oldin engil o'qishni qidirsangiz, biz sinovdan o'tkazadigan barcha xususiyatlarni tavsiflovchi W3C media-so'rov spetsifikatsiyasini o'qishdan ham yomonroq ish qilishingiz mumkin.
03. Yana bir narsa…
CSS-ga media-so'rovlarni qo'shgan bo'lsak-da, agar biz saytni mobil qurilmada ko'rsak, bizning saytimiz hanuzgacha displey 768px-dan kengroq bo'lib ko'rsatilayotganligini sezasiz.
Nima uchun bu sodir bo'layotganini tushunish uchun qisqacha tarix darsini o'tkazishimiz kerak.
2007 yilda asl iPhone e'lon qilinganida, uning katta sotuv nuqtalaridan biri bu "haqiqiy veb" ni ko'rib chiqish qobiliyati edi, hattoki bu kichik ekranga joylashishi uchun siqib chiqarilishi kerak bo'lgan aniq kenglikdagi ish stoliga yo'naltirilgan saytlarni nazarda tutgan bo'lsa ham. IPhone buni o'z ekranini 980px kengligi haqida hisobot berish orqali amalga oshirdi, bunda uning veb-sahifalarini 320 pikselli ekranga moslashtirish uchun.
Ammo iPhone sezgir dizayn paydo bo'lishidan oldin taqdim etilgan. Endi mualliflar mobil telefonlar uchun mo'ljallangan saytlarni loyihalashtirmoqda, bu xususiyat unchalik foydali emas. Yaxshiyamki, Apple ushbu xatti-harakatni chetlab o'tish vositasini o'z ichiga olgan va uni boshqa ishlab chiqaruvchilar qabul qilganidan beri deyarli amalda standart. Bu shunchaki bitta qo'shishni o'z ichiga oladi meta bizning belgilash elementimiz:
meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />
Bu veb-saytni kichraytirish kerak emasligi va brauzer oynasining kengligi umumiy qurilma kengligi bilan bir xil bo'lishi kerakligi haqida ko'rish joyidan xabardor brauzerlarga xabar beradi. Ushbu qatorni qo'shgandan so'ng, bizning veb-saytimiz mo'ljallangan tartib bilan paydo bo'ladi:
04. To'xtash nuqtalarini tanlash
Media-so'rovimizga qaytamiz:
@media ekrani va (min en: 768px) {
...
}
Tartibni moslashtiradigan qiymatlar odatda to'xtash nuqtalari deb nomlanadi. Esingizda bo'lsa, ikkinchi qismda men piksellardan foydalanish javobsiz fikrlashning ko'rsatkichi deb aytgan edim, ammo men bu erda taniqli qurilmaning kengligi bo'lganligi sababli, men 768 pikselni tanladim.
Ommabop qurilmalarning xususiyatlariga qarab to'xtash nuqtalarini tanlash o'rniga, bizning tarkibimizdan kelib chiqadigan qiymatlarga, masalan, o'qish uchun qulay chiziq uzunliklariga yoki rasmning maksimal hajmiga qarash samaraliroq bo'lishi mumkin.
Bizning turimiz o'lchamlari ems-dan foydalangan holda, bizning media-so'rovlarimiz uchun ham emlardan foydalanish oqilona ko'rinadi. Aslida buni qilish qo'shimcha foyda keltiradi. Foydalanuvchi brauzerdagi matn hajmini o'zgartirganda, sahifalar kichikroq uzilish nuqtalarini ishlatishga moslashadi. Bizning veb-saytimiz nafaqat ko'rinish oynasi hajmiga, balki shrift o'lchamiga qarab ham moslashadi. Darhaqiqat, Jeremi Keytning ommaviy axborot vositalarida so'rovlarini namoyish qilganini ko'rganimdagina, ular qanchalik kuchli bo'lishi mumkinligini angladim.
Bizning dizaynimiz mumkin bo'lgan to'xtash nuqtalarini ko'rsatadigan bo'lsa-da, ko'pincha ularni tanlashning eng yaxshi usuli bu tajriba. Brauzer oynasining kengligini o'zgartirib, men 800px-ni yanada kengroq tartib bilan almashtirish uchun yaxshi kenglik deb qaror qildim.
Qanday qilib biz 800px ems bilan ifodalanamiz? Shunga qaramay, biz formuladan foydalanishimiz mumkin, ammo kontekst nima? Media-so'rovlar uchun ems-ni hisoblashda kontekst har doim brauzerning standart shrift o'lchamiga teng bo'ladi CSS-da ushbu qiymat bekor qilinganligidan qat'iy nazar. Ushbu sukut odatda 16pxga teng, bu bizga quyidagilarni beradi:
800 / 16 = 50
Endi biz media-so'rovimizni quyidagicha yangilashimiz mumkin:
@media ekrani va (min en: 50em) {/ * 800px * /
...
}
05. Kichik rasmlarimizni sozlash
Esingizda bo'lsa, 2-qismda biz eskizlarimizni sezgir bo'lishimiz uchun yaratdik. Shunga qaramay, ushbu eskizlar ichidagi rasmlar to'liq kenglikka erishgandan so'ng, har bir rasmning o'ng tomonida bo'sh joy paydo bo'ladi. Shunga qaramay, media-so'rovlar buni tuzatishga imkon beradi.
Mana bizning asl CSS:
ol.media li.media-item {
orqa rang: #fff;
margin: 0 4.16666666667% 4.16666666667% 0;
kengligi: 47.91666666667%;
suzuvchi: chap;
}
ol.media li.media-item: n-bola (2n) {
margin-right: 0;
}
Ushbu bo'sh joy paydo bo'ladigan nuqta, xuddi brauzer 560 pikseldan kengroq o'sib borishi bilan bog'liq.Biz har bir satrda uchta kichik rasmni almashtirish uchun almashtirish qiymatini tanlaymiz. Buni quyidagi CSS-ni qo'shish orqali amalga oshirishimiz mumkin:
@media ekrani va (min en: 35em) {
.media-item {
kengligi: 30.612244897959%; / * 240/784 * /
margin: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
margin-right: 0;
}
}
Shuni esda tutingki, ushbu media-so'rov ichidagi eskiz uchun zarur bo'lgan barcha uslublarni qayta yozishga hojat yo'q, faqat biz moslashtirmoqchi bo'lgan qismlarni.
Ushbu o'zgarishni brauzerda ko'rib chiqib, har bir ikkinchi kichik rasmning o'ng tomonida chekka joy yo'qligiga e'tibor qaratasiz. Buning sababi shundaki, quyidagi CSS qoidalari hanuzgacha faol bo'lib qolmoqda:
ol.media li.media-item: n-bola (2n) {
margin-right: 0;
}
Ushbu qiymatni tiklash uchun biz CSS-ni media-so'rovimiz davomida o'zgartirishimiz kerak:
@media ekrani va (min en: 35em) {
.media-item {
kengligi: 30.612244897959%; / * 240/784 * /
margin: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
margin-right: 4.081632653061%;
}
.media-item: nth-child (3n) {
margin-right: 0;
}
}
Media-so'rovlarni yaratishda, har doim bu kabi meros masalalaridan xabardor bo'ling.
06. Faqat kenglik emas
Media so'rovlari haqida nafaqat kenglik, balki boshqa o'zgaruvchilar haqida ham o'ylash muhimdir. Masalan, ko'rish oynasi balandligi pasayganda, bizning media-sahifamizdagi video qisman yashiringan. Bizda texnologiya mavjud:
.media-object-wrapper {
pastki qism: 56,25%;
kengligi: 100%;
balandlik: 0;
pozitsiya: nisbiy;
}
@media ekrani va (maksimal balandlik: 35em) va (orientatsiya: landshaft) {/ * 560px * /
.media-object-wrapper {
kengligi: 60%;
pastki qism: 33,75%;
}
}
Ushbu xatti-harakatni yanada noziklashtirish uchun men hatto yo'naltirilgan so'rovni kiritdim.
Biz dizaynimizning boshqa qismlari uchun ham shunga o'xshash yondashuvga amal qilishimiz mumkin, sarlavhaning kattaroq versiyasini almashtiramiz va bo'sh joy bo'lgandan keyin navigatsiya havolalarini sahifaning yuqori qismiga o'tkazamiz.
- Bizning javob sahifamizni ko'ring
- Bizning javob beradigan media-sahifamizni ko'ring
Va bizda bor! Biz javob beradigan veb-saytni yaratdik va bo'sh vaqtimiz bor! Xo'sh, unchalik emas. Moslashuvchan maketlar, rasmlar va media-so'rovlar faqat javob beradigan dizayn jarayonining boshlanishi.
Ertaga: Ushbu o'quv qo'llanmaning yakuniy qismida biz javob beradigan veb-dizayndan o'tib, haqiqatan ham javob beradigan veb-saytlarni qanday yaratishimiz mumkinligini ko'rib chiqamiz.
Pol Angliyaning Brayton shahrida joylashgan interaktiv dizayner. U Internetda sodda, ammo qiziqarli interfeyslarni yaratishda eng baxtlidir.
