Изградете адаптивни оформления без медийни заявки

Дълго време се опитвах да постигна перфектна визуална композиция на уеб страниците. Изпитвах много болка с CSS точки на прекъсване в ежедневната си работа и никога не бях доволен от често срещаните начини за работа с отзивчивото оформление. Наскоро открих много готино отзивчив уеб дизайн трик, който прави всичко опростено, последователно и логично и съм нетърпелив да го споделя с вас.

Тази статия е главно за творческо развитие, следователно тя е както за разработчици от предния край, които биха могли да намерят тази техника за полезна, така и за уеб дизайнери, които трябва да имат общо разбиране за уеб производството и как да подобрят крайния резултат Предполагам, че вече знаете за CSS, точки на прекъсване и медийни заявки.

Традиционният начин

Адаптивни оформления: точки на прекъсване



Точките на прекъсване могат да доведат до незадоволителни резултати за нестандартни изгледи

Преносимите устройства превземат света. Разнообразие от всякакви устройства променят начина, по който създаваме уебсайтове. Под „реагиращ уебсайт“ повечето хора приемат само настолни и мобилни версии (понякога настолни, таблетни, мобилни). Ето как работи традиционно:

h1 { font-size: 80px; } .container { width: 980px; margin: 0 auto; } @media (max-width: 1023px) { h1 { font-size: 48px; } .container { width: auto; padding: 0 30px; } }

Всъщност обикновено оформление на уебсайта виждаме, че не е създадено за нашето устройство. Например, нека видим как коригираме размера на шрифта на

заглавие:

Адаптивни оформления

Само с една точка на прекъсване можете да получите странно изглеждащи размери на точките

Виждате ли, нашите

заглавието има „размер на шрифта: 48 пиксела“ на устройства с ширина 320 и 800 пиксела и „размер на шрифта: 80 пиксела“ на 1024 пиксела и 2560 пиксела.

Разбира се, можем да добавим още точки на прекъсване, но броят на различните устройства е безброй! Това ще направи спецификациите на дизайна много сложни и объркващи, защото е трудно да се разбере коя стойност е приложена към кой екран.

Адаптивни оформления: размер на шрифта

Никога не можете да създадете достатъчно точки на прекъсване, за да постигнете идеален размер на шрифта на всеки екран

Това, от което наистина се нуждаем, е това:

Единици за изглед

Адаптивни оформления: единици от гледна точка

Единиците на Viewport подобряват нещата, но все пак се нуждаят от работа

Решението на този проблем включва модули за визуализация VW и VH. Това са мерни единици, представляващи 1/100 от ширината / височината на прозореца за гледане (широко поддържани от браузъри от IE9 +).

Можем да ги използваме, за да коригираме свойствата на уеб страницата според нейния размер. Ситуацията ще се подобри малко, но болката е все същата:

h1 { font-size: calc( ( 80 / 1920 ) * 100vw; } .container { width: 80vw; margin: 0 auto; } @media (max-width: 1023px) { h1 { font-size: calc( ( 48 / 375 ) * 100vw; } .container { width: 90vw; } }

Никога не знаем дали е твърде голям или твърде малък.

Как можем да изградим истинска адаптивна система за оформление? Как да проектираме отзивчив уебсайт, който да работи от 320px до 2560px?

В идеалния случай вашият макет трябва да обясни логиката зад оформлението и как се адаптира от по-малка резолюция към по-голяма:

Решението

Адаптивни оформления: решение

Ето как да направите наистина адаптивна система за оформление

Искаме непрекъснато да коригираме свойствата от малък екран към голям. Без точки на прекъсване и без медийни заявки. Това, което искаме, е една-единствена стойност, която работи за всеки дисплей.

Математическата функция с две променливи е ключът. Например, ако искаме да коригираме размера на шрифта на заглавието, функцията трябва да изглежда така:

1920x + y = 80
375x + y = 48

1920 - ширина на работния плот по подразбиране в макет на дизайн (равен на 100vw)
375 - мобилна ширина по подразбиране в макет на дизайн (равен на 100vw)
80 - желан размер на шрифта на заглавието H1 на работния плот
48 - желан размер на шрифта на заглавието H1 на мобилно устройство

Това са стойностите X и Y:

x = (80 - 48) / (1920 - 375)
x = 0,0207

у = 80 - 1920 * 0,0207
у = 40,256

За да използваме тези стойности, ще ни е необходима функцията CALC CSS за извършване на изчисления на уеб страницата (широко поддържана от браузъри от IE9 +). Трябва да броим X * 100 пъти (защото 1VW единица = 1/100 от ширината на прозореца).

Вземаме нашата оригинална функция:
1920x + y = 80
375x + y = 48

Заменете 1920 със 100vw:
100vw * x + y = желана стойност

Заменете x и y със стойностите:
100vw * 0,0207 + 40,256 = желана стойност

Получаваме окончателния CSS стил:

h1{ font-size: calc(2.07vw + 40.25px)}

Достатъчно изненадващо, това най-накрая работи точно както искахме!

Само едно свойство за всички дисплеи. Няма нужда да презаписвате стойностите отново и отново. Можете да регулирате и изчислявате всякакви свойства: ширина, размер на шрифта, подложка, поле и др.

Нека се опитаме да изградим действително оформление, използвайки тази техника:

Но този подход има един недостатък: трудно е да се разбере каква стойност стои зад тази функция CALC. Как можем да го опростим?

Ако кодирате HTML ежедневно, вероятно сте запознати с предварителните процесори SASS / SCSS. Ето малко помощ за вас: нека направим „смесване“ и да направим всички тези изчисления да се случват автоматично и все пак да запазим първоначалните си стойности.

Това е същата функция, както е описана по-горе, но направена като SASS миксин:

$display-wide: 1920 $display-narrow: 375 @mixin fluid($property, $minValue, $maxValue) $x: ($maxValue - $minValue)/($display-wide - $display-narrow) $y: $maxValue - $display-wide * $x #{$property}: calc(#{100*$x}vw + #{$y}px) h1 @include fluid('font-size',48,80) .container @include fluid('width',315,1580) @include fluid('padding',30,60)

Адаптивни оформления: миксин

Смесица SASS може да улесни целия процес

Тази техника предоставя много сложно решение за окончателно изграждане на наистина отзивчиви уеб оформления. Той поддържа повечето браузъри, осигурява вашия проект да бъде правилно показан на посетител, опростява структурата на вашите стилове и най-важното прави вашето уеб оформление последователно и логично. Надявам се, че може да ви помогне да стартирате някои изумителни уеб проекти.

Свързани статии: