Направите одзивни сајт за недељу дана: медијски упити (4. део)

Садржај

• 01. Додавање медијских упита
• 02. Анатомија медијског упита
• 03. Још нешто ...
• 04. Избор тачака прекида
• 05. Прилагођавање наших сличица
• 06. Не само ширина

• Потребно знање: Средњи ЦСС и ХТМЛ
• Захтева: Уређивач текста, савремени прегледач, графички софтвер
• Време пројекта: 1 сат (укупно 5 сати)
• Датотека за подршку

Релативно нови део ЦСС спецификације, медијски упити су несумњиво најузбудљивији аспект респонзивног веб дизајна и подручје зрело за даља експериментирања.

Прихвативши потребу за прилагодљивим распоредима, неки су медијске упите видели као средство за накнадну уградњу прилагодљивих распореда на постојеће локације фиксне ширине. Међу онима који су прихватили прилагодљиве изгледе, многи су то учинили из перспективе радне површине, скривајући садржај и функције како се прозор за приказ сужава.

Кроз ово упутство, користили смо алтернативни, прво мобилни приступ. Сада, док гледамо да укључимо медијске упите, можемо размишљати о томе додавање карактеристике како се некретнина на екрану повећава, сигурни у сазнању да ознаке и дизајн који подупиру нашу веб локацију пружају респектабилну основну основу.

Данас ћемо прећи преко нашег портфеља образаца и направити појединачне странице потребне за нашу веб страницу. Притом ћемо видети како се конструишу медијски упити и применити их на заиста реагујући начин.

01. Додавање медијских упита

Пошто су компоненте у нашем портфељу узорака комплетне и раде ван граница било ког изгледа, време је да их преместите на различите странице које чине нашу веб локацију.

Започећемо са нашом почетном страницом. Из дизајна оријентисаног на радну површину видимо да би се у ширим оквирима за приказ наш изглед требао појавити на следећи начин:

Узимајући мере из нашег дизајна, можемо описати подручје документа у ЦСС-у на следећи начин:

.доцумент {
попуњавање: 0 5%;
}
.главни {
ширина: 74,242424242424%; / * 784/1056 * /
лебди: лево;
}
.цомплементари {
ширина: 22,727272727273%; / * 240/1056 * /
лебди: десно;
}

Као што смо сазнали у другом делу овог водича, користимо следећу формулу за израчунавање процентуалне ширине ових колона:

(циљ / контекст) * 100 = резултат

Када променимо величину прегледача, видећемо да се распоред радне површине скалира од најмањег екрана до највећег. Наравно, код малих величина колоне су преуске, а дужине линија тако кратке да је садржај тешко прочитати. Овај распоред желимо само када има довољно простора за рад.

Овде долазе медијски упити. Под претпоставком да би овај распоред требало да ступи на снагу тек када је прегледач шири од 768пк, можемо додати следећи ЦСС:

.доцумент {
попуњавање: 0 5%;
}
@медиа екран и (минимална ширина: 768пк) {
.главни {
ширина: 74,242424242424%; / * 784/1056 * /
лебди: лево;
}
.цомплементари {
ширина: 22,727272727273%; / * 240/1056 * /
лебди: десно;
}
}

Сада, када је оквир за приказ ужи од 768пк, све унутар упита за медије ће се занемарити. Занемариће га било који прегледач који такође не подржава медијске упите.

02. Анатомија медијског упита

Да бисмо разумели шта се овде догађа, погледајмо како је конструисан медијски упит. Можемо га поделити на два дела:

• @медиа сцреен: Први део медијског упита је врста медија. Ову синтаксу ћете можда препознати ако сте икада укључили стилове штампања у свој ЦСС. Такође можете препознати име типа из медија атрибут на линк> елемент. То је зато што обе прихватају одобрени скуп типова медија који се налазе у ЦСС 2.1 спецификацији.
• (минимална ширина: 768пк): Други део је упит. Ово укључује одлика за које се тражи (у овом случају минимална ширина оквира за приказ) и одговарајуће вредност да бисте тестирали (768пк).

Када говоримо о респонзивном веб дизајну, постоји тенденција да се усредсредимо на ширину, али постоје и друге карактеристике које такође можемо тестирати:

• (мин- | мак-) ширина и (мин- | мак-) висина: Они нам омогућавају да испитамо ширину и висину оквира за приказ (тј. Прозора прегледача).
• (мин- | мак-) ширина уређаја и (мин- | мак-) висина уређаја: Они нам омогућавају да испитамо ширину читавог екрана. Према мом искуству, обично је разумније базирати распореде на пољу за приказ, а не на екрану.
• оријентација: Овде можете одмах размишљати о могућностима; размислите о апликацијама које приказују различит садржај на основу оријентације вашег телефона - исто је могуће и на вебу.
• (мин- | мак-) однос ширине и висине: То нам омогућава да прилагодимо распореде на основу односа прозора прегледача ...
• (мин- | мак-) однос пропорција уређаја: ... и ово нам омогућава да учинимо исто на основу односа ширине и висине уређаја. Овен Грегори написао је предиван чланак прошле године који је истражио како можемо да користимо овај упит како бисмо свој дизајн повезали са уређајима на којима се појављују.
• (мин- | мак-) монохроматски: Такође можемо да тестирамо да ли уређај има монохроматски екран или не. Замислите колико би ово било корисно да Амазонови уређаји за е-мастило Киндле не лажу и не пријављују своје екране у боји!

Завршни део нашег упита је можда најкориснији. Коришћењем и, можемо да тестирамо више карактеристика у једном упиту. На пример:

екран @медиа и (минимална ширина: 768пк) и (оријентација: пејзаж) {
...
}

Као што видите, медијски упити могу нам помоћи да створимо прилично убедљива искуства - а ја сам само додирнуо површину. Ако тражите лагано читање пред спавање, могли бисте и горе него да прочитате спецификацију упита В3Ц за медије која описује све функције за које можемо да тестирамо.

03. Још нешто ...

Иако смо у наш ЦСС уврстили медијске упите, ако своју веб страницу прегледамо на мобилном уређају, приметићете да се наша веб локација и даље приказује као да је екран шири од 768пк.

Да бисмо разумели зашто се то догађа, морамо да направимо кратку лекцију из историје.

Када је оригинални иПхоне најављен 2007. године, једна од његових великих продајних тачака била је могућност претраживања „правог веба“, чак иако је то значило сајтове оријентисане ка радној површини фиксне ширине које је требало збити да стану на његов мали екран. ИПхоне је то могао да уради тако што је пријавио да његов екран има ширину од 980 пиксела, пре него што је смањио веб странице тако да одговарају његовом екрану ширине 320 пиксела.

Али иПхоне је представљен пре појаве респонзивног дизајна. Сада када аутори дизајнирају сајтове дизајниране за мобилне уређаје, ова функција је мање корисна. Срећом, Аппле је укључио начин заобилажења овог понашања, а откако су га усвојили други произвођачи, постао је готово заправо стандард. Једноставно укључује додавање сингла мета елемент наше ознаке:

мета наме = "виевпорт" цонтент = "Инитиал-сцале = 1.0, видтх = девице-видтх" />

Ово говори претраживачима који гледају на видик да веб локацију не треба смањивати и да се ширина прозора прегледача третира исто као и укупна ширина уређаја. Једном када додамо овај ред, наша веб локација ће се појавити са предвиђеним изгледом:

04. Избор тачака прекида

Вратимо се нашем медијском упиту:

@медиа екран и (минимална ширина: 768пк) {
...
}

Вредности којима се распоред прилагођава обично се називају тачкама прекида. Ако се сећате, у другом делу сам рекао да је коришћење пиксела показатељ неодговорног размишљања, али овде сам одабрао 768пк, вероватно зато што је то ширина познатог уређаја.

Уместо да одабирете тачке прекида на основу карактеристика популарних уређаја, може бити ефикасније погледати вредности изведене из нашег садржаја, на пример, удобне дужине линија за читање или максималну величину слике.

Како се величина нашег типа користи помоћу емс-а, чини се разумним да и наши медијски упити користе емс. Заправо то има додатну корист. Када корисник промени величину текста у прегледачу, странице ће се прилагодити тако да користе мање тачке прекида. Не само да ће се наша веб страница прилагодити на основу величине оквира за приказ, већ и величине фонта. У ствари, тек кад сам видео Јеремија Китха како демонстрира медијске упите засноване на ем, схватио сам колико моћни могу бити.

Иако наш дизајн може пружити неке назнаке могућих тачака прекида, често је најбољи начин да их одаберемо експериментисањем. Прилагођавајући ширину прозора прегледача, закључио сам да је 800пк добра ширина за пребацивање на сложенији изглед.

Како се, међутим, 800 пк изражава у емс-у? Поново можемо да користимо нашу формулу, али какав је контекст? Приликом израчунавања емс-а за медијске упите, контекст је увек задата величина фонта прегледача без обзира да ли је ова вредност замењена у вашем ЦСС-у. Ово подразумевано је 16 пиксела, што нам даје:

800 / 16 = 50

Сада можемо да ажурирамо наш упит за медије тако:

@медиа екран и (минимална ширина: 50ем) {/ * 800пк * /
...
}

05. Прилагођавање наших сличица

Сјетићете се да смо у другом делу обликовали сличице како би реаговале. Ипак, кад слике унутар ових сличица достигну пуну ширину, десно се од сваке слике појављује простор са празним простором. Опет, медијски упити омогућавају нам да то поправимо.

Ево нашег оригиналног ЦСС-а:

ол.медиа ли.медиа-итем {
боја позадине: #ффф;
маржа: 0 4,16666666667% 4,16666666667% 0;
ширина: 47,91666666667%;
лебди: лево;
}
ол.медиа ли.медиа-итем: нтх-цхилд (2н) {
маргина-десно: 0;
}

Тачка у којој се појављује овај размак је управо када се прегледач шири од 560пк.Изабраћемо ову вредност при којој ћемо је заменити тако да приказује три сличице по реду. То можемо учинити додавањем следећег ЦСС-а:

@медиа екран и (минимална ширина: 35ем) {
.медиа-итем {
ширина: 30,612244897959%; / * 240/784 * /
маржа: 0 4,081632653061% 1,1429ем 0; / * 0 32/784 16пк 0 * /
}
.медиа-итем: нтх-цхилд (3н) {
маргина-десно: 0;
}
}

Имајте на уму да не треба да преписујемо све стилове потребне за сличицу у овом медијском упиту, већ само делове које желимо да прилагодимо.

Гледајући ову промену у прегледачу, приметићете да нема маргине десно од сваке друге сличице. То је зато што следеће ЦСС правило и даље остаје активно:

ол.медиа ли.медиа-итем: нтх-цхилд (2н) {
маргина-десно: 0;
}

Морамо да изменимо ЦСС у нашем медијском упиту да бисмо ресетовали ту вредност:

@медиа екран и (минимална ширина: 35ем) {
.медиа-итем {
ширина: 30,612244897959%; / * 240/784 * /
маржа: 0 4,081632653061% 1,1429ем 0; / * 0 32/784 16пк 0 * /
}
.медиа-итем: нтх-цхилд (2н) {
маргина-десно: 4,081632653061%;
}
.медиа-итем: нтх-цхилд (3н) {
маргина-десно: 0;
}
}

Када креирате медијске упите, увек будите свесни таквих проблема са наследством.

06. Не само ширина

Важно је размишљати о медијским упитима не само у погледу ширине, већ и других променљивих. На пример, видео на нашој страници са медијским ставкама делимично је скривен када се висина оквира за приказ смањи. Имамо технологију:

.медиа-објецт-враппер {
доњи део: 56,25%;
ширина: 100%;
висина: 0;
положај: сродник;
}
екран @медиа и (максимална висина: 35ем) и (оријентација: пејзаж) {/ * 560пк * /
.медиа-објецт-враппер {
ширина: 60%;
доњи део: 33,75%;
}
}

Укључио сам чак и упит за оријентацију да бих даље усавршио ово понашање.

Сличан приступ можемо следити и за остале делове нашег дизајна, замењујући већу верзију заглавља и померајући навигационе линкове на врх странице када простор постане доступан.

• Погледајте нашу прилагодљиву почетну страницу
• Погледајте нашу страницу са медијским одговорима

И ето га! Направили смо прилагодљиву веб страницу - и са даном за резервом! Па, не баш. Флексибилни распореди, слике и упити за медије само су почетак процеса прилагодљивог дизајна.

Сутра: У завршном делу овог водича прећи ћемо даље од респонзивног веб дизајна и погледати како можемо да направимо истински одзивне веб локације.

Паул је дизајнер интеракција са седиштем у Бригхтону, у Енглеској. Најсрећнији је када израђује једноставне, али занимљиве интерфејсе који су урођени Интернету.