Стварыце адаптыўны сайт за тыдзень: медыя-запыты (частка 4)

Задаволены

• 01. Даданне медыя-запытаў
• 02. Анатомія запыту ў СМІ
• 03. Яшчэ адно ...
• 04. Выбар кропак спынення
• 05. Наладжванне нашых мініяцюр
• 06. Не толькі шырыня

• Неабходныя веды: Прамежкавыя CSS і HTML
• Патрабуецца: Тэкставы рэдактар, сучасны браўзэр, графічнае праграмнае забеспячэнне
• Час праекта: 1 гадзіна (усяго 5 гадзін)
• Файл падтрымкі

Адносна новая частка спецыфікацыі CSS, мультымедыйныя запыты, несумненна, з'яўляюцца найбольш захапляльным аспектам адаптыўнага вэб-дызайну і вобласцю, гатовай для далейшых эксперыментаў.

Прыняўшы неабходнасць адаптыўных макетаў, некаторыя разглядалі запыты ў сродках масавай інфармацыі як сродак для мадэрнізацыі адаптыўных макетаў на існуючыя сайты з фіксаванай шырынёй. Сярод тых, хто прыняў спагадныя макеты, шмат хто рабіў гэта з пункту гледжання працоўнага стала, хаваючы змест і функцыі па меры звужэння віду прагляду.

На працягу гэтага ўроку мы выкарыстоўвалі альтэрнатыўны, мабільны падыход. Цяпер, калі мы хочам уключыць запыты ў СМІ, мы можам падумаць даданне асаблівасці па меры павелічэння экраннай нерухомасці, упэўненыя ў тым, што разметка і дызайн, якія ляжаць у аснове нашага сайта, забяспечваюць рэспектабельную аснову.

Сёння мы выйдзем за межы нашага партфеля шаблонаў і створым асобныя старонкі, неабходныя для нашага сайта. Пры гэтым мы ўбачым, як будуюцца медыя-запыты, і рэалізуем іх па-сапраўднаму рэагуючымі спосабамі.

01. Даданне медыя-запытаў

Калі кампаненты ў нашым партфоліа завершаны і працуюць па-за межамі любога макета, прыйшоў час перанесці іх на розныя старонкі, якія складаюць наш сайт.

Мы пачнем з нашай хатняй старонкі. З дызайну, арыентаванага на працоўны стол, мы бачым, што ў больш шырокіх праглядах наш макет павінен выглядаць наступным чынам:

Узяўшы вымярэнні з нашага дызайну, мы можам апісаць вобласць дакумента ў CSS наступным чынам:

.document {
абіўка: 0 5%;
}
.main {
шырыня: 74,242424242424%; / * 784/1056 * /
паплавок: злева;
}
.complementary {
шырыня: 22,727272727273%; / * 240/1056 * /
паплавок: справа;
}

Як мы даведаліся ў другой частцы гэтага падручніка, мы выкарыстоўваем наступную формулу для вылічэння працэнтнай шырыні гэтых слупкоў:

(мэта / кантэкст) * 100 = вынік

Калі мы зменім памер нашага браўзэра, мы ўбачым, што наш макет працоўнага стала маштабуецца ад экрана найменшага памеру да найбольшага. Зразумела, пры невялікіх памерах слупкі занадта вузкія, а даўжыня радкоў настолькі кароткая, што змест цяжка чытаць. Мы хочам гэтага макета толькі тады, калі ў яго ёсць дастаткова месца для яго працы.

Тут і ўзнікаюць медыязапыты. Мяркуючы, што гэты макет павінен уступіць у сілу толькі тады, калі браўзэр шырэй 768px, мы можам дадаць наступны CSS:

.document {
абіўка: 0 5%;
}
экран @media і (мінімальная шырыня: 768px) {
.main {
шырыня: 74,242424242424%; / * 784/1056 * /
паплавок: злева;
}
.complementary {
шырыня: 22,727272727273%; / * 240/1056 * /
паплавок: справа;
}
}

Цяпер, калі вобласць прагляду ўжо, чым 768px, усё, што знаходзіцца ў запыце медыя, будзе ігнаравацца. Ён будзе праігнараваны любым аглядальнікам, які таксама не падтрымлівае медыя-запыты.

02. Анатомія запыту ў СМІ

Каб зразумець, што тут адбываецца, давайце паглядзім, як будуецца медыязапыт. Мы можам падзяліць яго на дзве часткі:

• Экран @media: Першая частка медыя-запыту - тып носьбіта. Вы можаце распазнаць гэты сінтаксіс, калі калі-небудзь уключалі стылі друку ў свой CSS. Вы таксама можаце распазнаць імя тыпу з СМІ атрыбут на спасылка> элемент. Гэта тлумачыцца тым, што абодва прымаюць зацверджаны набор тыпаў носьбітаў дадзеных у спецыфікацыі CSS 2.1.
• (мінімальная шырыня: 768px): Другая частка - запыт. Гэта ўключае ў сябе асаблівасць для запыту (у дадзеным выпадку мінімальная шырыня прагляду) і адпаведнага значэнне праверыць на (768px).

Калі мы гаворым пра адаптыўны вэб-дызайн, ёсць тэндэнцыя засяродзіцца на шырыні, але ёсць і іншыя функцыі, на якія мы таксама можам праверыць:

• (мін- | макс-) шырыня і (мін- | макс-) вышыня: Яны дазваляюць запытаць шырыню і вышыню прагляду (г.зн. акно аглядальніка).
• (мін- | макс-) шырыня прылады і (мін- | макс-) вышыня прылады: Яны дазваляюць запытаць шырыню ўсяго дысплея. З майго досведу, звычайна больш разумна базіраваць макеты на экране прагляду, а не на дысплеі.
• арыентацыя: Тут можна адразу падумаць пра магчымасці; падумайце аб праграмах, якія паказваюць розны змест у залежнасці ад арыентацыі вашага тэлефона - тое ж самае магчыма ў Інтэрнэце.
• (мін- | макс-) суадносіны бакоў: Гэта дазваляе нам адаптаваць макеты з улікам суадносін акна браўзэра ...
• (мін- | макс-) суадносіны бакоў прылады: ... і гэта дазваляе зрабіць тое ж самае на аснове суадносін бакоў прылады. У мінулым годзе Оўэн Грэгары напісаў выдатны артыкул, у якім даследуецца, як мы можам выкарыстоўваць гэты запыт, каб звязаць дызайн з прыладамі, на якіх яны з'яўляюцца.
• (мін- | макс-) манахромны: Мы таксама можам праверыць, ці ёсць у прылады манахромны дысплей. Уявіце, наколькі гэта было б карысна, калі б прылады электроннай фарбы Kindle Amazon не хлусілі і паведамлялі пра свае экраны як пра каляровыя!

Заключная частка нашага запыту, магчыма, найбольш карысная. З дапамогай і, мы можам праверыць некалькі функцый у адным запыце. Напрыклад:

экран @media і (мінімальная шырыня: 768px) і (арыентацыя: альбомны) {
...
}

Як бачыце, запыты ў СМІ могуць дапамагчы нам стварыць даволі пераканаўчы досвед - і я толькі дакрануўся да паверхні. Калі вы шукаеце лёгкага чытання перад сном, вы можаце зрабіць горш, чым прачытаць спецыфікацыю запыту СМІ W3C, якая апісвае ўсе функцыі, якія мы можам праверыць.

03. Яшчэ адно ...

Нягледзячы на ​​тое, што мы ўключылі мультымедыйныя запыты ў наш CSS, калі мы праглядаем наш сайт на мабільнай прыладзе, вы заўважыце, што наш сайт усё яшчэ адлюстроўваецца так, быццам дысплей быў шырэйшы за 768 пікселяў.

Каб зразумець, чаму гэта адбываецца, нам трэба прайсці кароткі ўрок гісторыі.

Калі ў 2007 годзе быў анансаваны арыгінальны iPhone, адным з галоўных пунктаў яго продажу была магчымасць праглядаць «рэальны Інтэрнэт», нават калі гэта азначала сайты, арыентаваныя на працоўны стол з фіксаванай шырынёй, якія трэба было раздушыць, каб змясціць іх на маленькім экране. IPhone змог зрабіць гэта, паведаміўшы, што яго дысплей шырынёй 980 пікс., Перад тым як зменшыць маштаб вэб-старонак, каб адпавядаць яго шырыні 320 пікселяў.

Але iPhone быў прадстаўлены да з'яўлення спагадлівага дызайну. Цяпер, калі аўтары займаюцца распрацоўкай сайтаў, прызначаных для мабільных прылад, гэтая функцыя менш карысная. На шчасце, Apple уключыла спосаб абыйсці гэта паводзіны, і паколькі яно было прынята на ўзбраенне іншымі вытворцамі, яно стала амаль дэ-факта стандартны. Гэта проста ўключае ў сябе даданне сінгла мета элемент нашай разметкі:

meta name = "viewport" content = "Initial-scale = 1.0, width = device-width" />

Гэта кажа аглядальнікам, якія ведаюць агляд, што вэб-сайт не варта маштабаваць і што шырыня акна браўзэра павінна быць аднолькавай з агульнай шырынёй прылады. Пасля таго, як мы дадамо гэты радок, наш вэб-сайт з'явіцца з прызначаным макетам:

04. Выбар кропак спынення

Вернемся да нашага медыя-запыту:

экран @media і (мінімальная шырыня: 768px) {
...
}

Значэнні, пры якіх адаптуецца макет, звычайна называюць кропкамі прарыву. Калі вы памятаеце, у другой частцы я сказаў, што выкарыстанне пікселяў з'яўляецца прыкметай безадмоўнага мыслення, але тут я абраў 768px, верагодна, таму, што гэта шырыня знаёмай прылады.

Замест таго, каб выбіраць кропкі спынення на аснове характарыстык папулярных прылад, можа быць больш эфектыўна разглядаць значэнні, атрыманыя з нашага зместу, напрыклад, зручную даўжыню радкоў для чытання альбо максімальны памер выявы.

Паколькі наш тып падбіраецца з дапамогай ems, для нашых запытаў у СМІ разумна выкарыстоўваць і ems. На самай справе гэта робіць дадатковую карысць. Калі карыстальнік змяняе памер тэксту ў браўзэры, старонкі будуць адаптавацца да выкарыстання меншых кропак спынення. Наш сайт будзе адаптавацца не толькі ў залежнасці ад памеру вобласці прагляду, але і памеру шрыфта. На самай справе, толькі калі я ўбачыў, як Джэрэмі Кіт дэманструе запыты СМІ на аснове em, я зразумеў, наколькі яны магутныя.

Хоць наш дызайн можа даць некаторыя ўказанні на магчымыя кропкі прарыву, часта лепшым спосабам іх выбару з'яўляецца эксперыментаванне. Рэгулюючы шырыню акна аглядальніка, я вырашыў, што 800px - гэта добрая шырыня, пры якой можна перайсці на больш складаны макет.

Як мы выказваем 800 px у ems? Зноў жа, мы можам выкарыстоўваць нашу формулу, але які кантэкст? Пры вылічэнні ems для медыя-запытаў кантэкстам заўсёды з'яўляецца памер шрыфта па змаўчанні ў аглядальніку незалежна ад таго, ці было гэта значэнне перавызначана ў вашым CSS. Па змаўчанні звычайна гэта 16 пікселяў, што дае нам:

800 / 16 = 50

Цяпер мы можам абнавіць медыя-запыт так:

Экран @media і (мінімальная шырыня: 50эм) {/ * 800px * /
...
}

05. Наладжванне нашых мініяцюр

Вы памятаеце, што ў другой частцы мы стылізавалі нашы эскізы, каб яны рэагавалі хутка. Аднак, як толькі выявы ў гэтых мініяцюрах дасягнуць поўнай шырыні, справа ад кожнай выявы з'явіцца прабел. Зноў жа, запыты ў СМІ дазваляюць нам гэта выправіць.

Вось наш арыгінальны CSS:

ol.media li.media-item {
фон-колер: #fff;
маржа: 0 4,16666666667% 4,16666666667% 0;
шырыня: 47,91666666667%;
паплавок: злева;
}
ol.media li.media-item: nth-child (2n) {
поле справа: 0;
}

Кропка, з якой з'яўляецца гэты прабел, як раз калі браўзэр расце шырэй, чым 560px.Мы абярэм гэта значэнне, пры якім памяняем яго на тры эскізы ў радку. Мы можам зрабіць гэта, дадаўшы наступны CSS:

экран @media і (мінімальная шырыня: 35эм) {
.media-item {
шырыня: 30,612244897959%; / * 240/784 * /
маржа: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
поле справа: 0;
}
}

Звярніце ўвагу, што нам не трэба перапісваць усе стылі, неабходныя для мініяцюры, у гэтым медыя-запыце, а толькі тыя часткі, якія мы хочам адаптаваць.

Праглядаючы гэта змяненне ў браўзэры, вы заўважыце, што справа ад кожнай другой мініяцюры няма поля. Гэта таму, што наступнае правіла CSS па-ранейшаму застаецца актыўным:

ol.media li.media-item: nth-child (2n) {
поле справа: 0;
}

Нам трэба змяніць CSS у нашым медыя-запыце, каб скінуць гэта значэнне:

экран @media і (мінімальная шырыня: 35эм) {
.media-item {
шырыня: 30,612244897959%; / * 240/784 * /
маржа: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
поле справа: 4,081632653061%;
}
.media-item: nth-child (3n) {
поле справа: 0;
}
}

Ствараючы медыя-запыты, заўсёды памятайце пра такія праблемы наследавання.

06. Не толькі шырыня

Важна думаць пра медыя-запыты не толькі з пункту гледжання шырыні, але і іншых зменных. Напрыклад, відэа на нашай старонцы мультымедыйнага матэрыялу часткова схавана пры памяншэнні вышыні прагляду. У нас ёсць тэхналогіі:

.media-object-wrapper {
пракладка дна: 56,25%;
шырыня: 100%;
вышыня: 0;
становішча: адноснае;
}
Экран @media і (максімальная вышыня: 35em) і (арыентацыя: альбомны) {/ * 560px * /
.media-object-wrapper {
шырыня: 60%;
пракладка дна: 33,75%;
}
}

Я нават уключыў запыт арыентацыі, каб удакладніць гэта паводзіны.

Мы можам прытрымлівацца аналагічнага падыходу і для іншых частак нашага дызайну, змяняючы аб'ём загалоўка ў большым аб'ёме і перамяшчаючы навігацыйныя спасылкі ўверх старонкі, як толькі з'явіцца месца.

• Паглядзіце нашу спагадную хатнюю старонку
• Паглядзіце нашу старонку хуткага рэагавання на мультымедыя

І вось у нас гэта ёсць! Мы стварылі адаптыўны вэб-сайт - і ў нас ёсць вольны дзень! Ну, не зусім. Гнуткая раскладка, выявы і запыты мультымедыя - гэта толькі пачатак працэсу хуткага рэагавання.

Заўтра: У заключнай частцы гэтага падручніка мы выйдзем за рамкі адаптыўнага вэб-дызайну і паглядзім, як мы можам стварыць сапраўды адаптыўныя вэб-сайты.

Пол - дызайнер узаемадзеянняў, які базуецца ў Брайтане, Англія. Ён самы шчаслівы, калі стварае простыя, але прывабныя інтэрфейсы, уласцівыя Інтэрнэту.