Съдържание
- 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).
Когато говорим за отзивчив уеб дизайн, има тенденция да се фокусираме върху ширината, но има и други функции, за които също можем да тестваме:
- (мин- | макс-) ширина и (мин. | макс.) височина: Те ни позволяват да запитваме ширината и височината на прозореца за гледане (т.е. прозореца на браузъра).
- (min- | max-) широчина на устройството и (min- | max-) височина на устройството: Те ни позволяват да запитваме ширината на целия дисплей. Според моя опит обикновено е по-разумно оформлението да се основава на прозореца за гледане, а не на дисплея.
- ориентация: Веднага можете да помислите за възможностите тук; помислете за приложения, които показват различно съдържание въз основа на ориентацията на вашия телефон - същото е възможно и в мрежата.
- (min- | max-) съотношение: Това ни позволява да адаптираме оформления въз основа на съотношението на прозореца на браузъра ...
- (min- | max-) съотношение на екрана на устройството: ... и това ни позволява да направим същото въз основа на съотношението на екрана на устройството. Миналата година Оуен Грегъри написа прекрасна статия, която изследва как можем да използваме тази заявка, за да обвържем дизайна си с устройствата, на които се появяват.
- (мин. | макс.) монохромен: Също така можем да тестваме дали дадено устройство има монохромен дисплей или не. Представете си колко полезно би било това, ако устройствата за електронно мастило Kindle на Amazon не лъжат и отчитат екраните си като цветни!
Последната част от нашата заявка е може би най-полезната. Като се използва и, можем да тестваме множество функции в една заявка. Например:
@media екран и (мин. ширина: 768px) и (ориентация: пейзаж) {
...
}
Както можете да видите, медийните заявки могат да ни помогнат да изградим доста завладяващи преживявания - и аз само докоснах повърхността. Ако търсите леко четене преди лягане, бихте могли да направите по-лошо, отколкото да прочетете спецификацията на заявката за медии W3C, която описва всички функции, за които можем да тестваме.
03. Още нещо ...
Въпреки че сме включили медийни заявки в нашия CSS, ако разглеждаме сайта си на мобилно устройство, ще забележите, че сайтът ни все още се изобразява така, сякаш дисплеят е по-широк от 768px.
За да разберем защо се случва това, трябва да вземем кратък урок по история.
Когато оригиналният iPhone беше обявен през 2007 г., една от най-големите му точки за продажба беше възможността за сърфиране в „истинската мрежа“, дори това да означаваше сайтове, ориентирани към настолни компютри с фиксирана ширина, които трябваше да бъдат смачкани, за да се поберат на малкия му екран. IPhone успя да направи това, като съобщи, че дисплеят му е 980px широк, преди да мащабира уеб страниците надолу, за да се побере на неговия екран с широчина 320px.
Но iPhone беше представен преди появата на отзивчив дизайн. Сега, когато авторите проектират сайтове, предназначени за мобилни устройства, тази функция е по-малко полезна. За щастие, Apple включи средство за заобикаляне на това поведение и откакто е прието от други производители, то се превърна в почти де факто стандартен. Това просто включва добавяне на сингъл мета елемент към нашата маркировка:
meta name = "viewport" content = "Initial-scale = 1.0, width = device-width" />
Това казва на браузърите, запознати с viewport, че уебсайтът не трябва да се намалява и че ширината на прозореца на браузъра трябва да се третира същата като общата ширина на устройството. След като добавим този ред, нашият уебсайт ще се появи с предвиденото оформление:
04. Избор на точки за прекъсване
Да се върнем към нашата медийна заявка:
@media екран и (мин. ширина: 768px) {
...
}
Стойностите, при които дадено оформление се адаптира, обикновено се наричат точки на прекъсване. Ако си спомняте, в част втора казах, че използването на пиксели е индикация за неотзивчиво мислене, но тук съм избрал 768px, вероятно защото това е ширината на познато устройство.
Вместо да избирате точки на прекъсване въз основа на характеристиките на популярните устройства, може да бъде по-ефективно да разгледате стойности, получени от нашето съдържание, например удобни дължини на линии за четене или максимален размер на изображение.
Тъй като нашият тип се оразмерява с помощта на ems, изглежда разумно за нашите медийни заявки да използваме и ems. Всъщност това има допълнителна полза. Когато потребителят преоразмери текста в браузъра, страниците ще се адаптират, за да използват по-малки точки на прекъсване. Нашият уебсайт ще се адаптира не само в зависимост от размера на прозореца, но и размера на шрифта. Всъщност едва когато видях Джеръми Кийт да демонстрира медийни заявки, базирани на em, разбрах колко мощни могат да бъдат те.
Въпреки че нашият дизайн може да предостави някои индикации за възможни точки на прекъсване, често най-добрият начин да ги изберете е чрез експериментиране. Чрез регулиране на ширината на прозореца на браузъра реших, че 800px е добра ширина, при която да се сменя на по-сложно оформление.
Как обаче изразяваме 800px в ems? Отново можем да използваме нашата формула, но какъв е контекстът? Когато се изчисляват ems за медийни заявки, контекстът винаги е стандартният размер на шрифта на браузъра независимо дали тази стойност е била заменена във вашия CSS. Това по подразбиране обикновено е 16px, което ни дава:
800 / 16 = 50
Вече можем да актуализираме нашата медийна заявка така:
@media екран и (мин. ширина: 50em) {/ * 800px * /
...
}
05. Коригиране на нашите миниатюри
Ще си спомните, че в част 2 оформихме миниатюрите си, за да реагираме. И все пак, след като изображенията в тези миниатюри достигнат пълната си ширина, вдясно от всяко изображение се появява зона с празно пространство. Отново медийните заявки ни позволяват да поправим това.
Ето нашия оригинален 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 екран и (мин. ширина: 35em) {
.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 екран и (мин. ширина: 35em) {
.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%;
}
}
Дори съм включил заявка за ориентация, за да усъвършенствам това поведение допълнително.
Можем да следваме подобен подход и за останалите части от нашия дизайн, като разменим в по-голяма версия на заглавката и преместваме навигационните връзки в горната част на страницата, след като се появи място.
- Вижте нашата отзивчива начална страница
- Вижте страницата ни за отзивчиви медии
И ето го! Изградихме отзивчив уебсайт - и с ден, който да пощадим! Е, не съвсем. Гъвкавите оформления, изображения и медийни заявки са само началото на отзивчивия процес на проектиране.
Утре: В последната част на този урок ще надхвърлим отзивчивия уеб дизайн и ще разгледаме как можем да изградим наистина отзивчиви уебсайтове.
Пол е дизайнер на взаимодействия със седалище в Брайтън, Англия. Той е най-щастлив, когато създава прости, но ангажиращи интерфейси, които са родни в мрежата.
