Отзивчив урок за дизайн - Научете отзивчив уеб дизайн за 5 минути

В тази статия ще ви науча на колкото се може повече отзивчиви техники за дизайн за пет минути. Това очевидно не е достатъчно, за да го научите правилно, но ще ви даде преглед на най-важните понятия, които аз лично определям като следните:

  • Относителни CSS единици
  • Медийни заявки
  • Flexbox
  • Отзивчива типография

Ако искате да се потопите по-дълбоко в темата след това, можете да проверите нашия отзивчив уебкамп за уеб разработчици на Scrimba, който ще ви позволи да създадете отзивчиви уебсайтове на професионално ниво.

Но засега да започнем с основите!

Относителни CSS единици

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

Най-често срещаните са:

  • %
  • ем
  • рем
  • vw
  • vh

В тази статия ще започнем с процентната единица %и след това ще разгледаме remединицата в последния раздел.

Да предположим, че имате много прост уебсайт, като този:

Допълнителен текст

Неговият HTML е само следният:

Welcome to my website

Както можете да видите от GIF по-долу, нашето изображение по подразбиране ще има фиксирана ширина:

Допълнителен текст

Това не е особено отзивчиво, така че нека променим това на 70 процента вместо това. Ние просто ще направим следното:

.myImg { width: 70%; } 

Това задава ширината на изображението на 70 процента от ширината на неговия родител, който е тагът. Тъй като етикетът обхваща цялата ширина на екрана, изображението винаги ще бъде 70 процента от самия екран.

Ето резултата:

Допълнителен текст

И това е колко лесно е да създадете отзивчив образ!

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

Имаме един проблем с отзивчивото ни оформление, който е, че изглежда странно на много малки екрани. Широчината от 70% се стеснява, когато се гледа на мобилно устройство. Просто погледнете сами:

U

Допълнителен текст

U

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

Ето как създаваме медийна заявка в CSS:

@media (max-width: 768px) { .myImage { width: 100% } } 

Този CSS блок ще бъде приложен само ако ширината на екрана е по-малка от 768 пиксела.

Ето резултата:

Допълнителен текст

Както можете да видите, страницата има точка на прекъсване, при която изображението внезапно става по-широко. Тогава браузърът е широк 768 пиксела и изображението се разменя между 70%и 100%.

Използване на Flexbox за навигационната лента

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

За да използваме Flexbox, ще направим нашия сайт малко по-сложен, като добавим лента за навигация над заглавието. Ето HTML за това:

 Home About me Contact  

По подразбиране просто ще изглежда така.

U

Допълнителен текст

U

Всички наши елементи за навигация са притиснати в лявата страна, което не е това, което искаме. Искаме да бъдат разположени равномерно на цялата страница.

За да постигнем това, ние просто ще превърнем навигационния контейнер в flexbox и след това ще използваме магическото justify-contentсвойство.

nav { display: flex; justify-content: space-around; } 

В display: flexпревръща в гъвкава поле, и justify-content: space-aroundказва на браузъра, че елементите в нея гъвкавата кутия трябва да има пространство около тях. Така че браузърът разпределя цялото остатъчно пространство еднакво около трите елемента.

Ето как изглежда. И както ще забележите, тя се мащабира добре:

Допълнителен текст

U

Адаптивна типография: rem

Последната стъпка е да направим и нашата типография отзивчива. Виждате ли, искам лентата за навигация и заглавието да се свият малко, когато екранът е по-малък от 768 пиксела (точката на прекъсване на нашата медийна заявка, помните ли?).

Един от начините да направите това е да намалите всички размери на шрифта в медийната заявка, като този:

@media (max-width: 768px) { nav { font-size: 14px; } h1 { font-size: 28px; } } 

Това обаче не е идеално. Може да се окажем с няколко точки на прекъсване в приложението и да имаме и множество елементи (h2, h3, абзаци и т.н.). В резултат на това ще трябва да следим всички елементи във всички различни точки на прекъсване. Ще стане бъркотия!

Най-вероятно обаче те ще се свържат помежду си по горе-долу по един и същ начин през различните точки на прекъсване. Например, h1винаги ще бъде по-голямо от paragraph.

И така, ако имаше начин да настроя един фактор и след това да направя останалите размери на шрифта да се мащабират спрямо този фактор?

Въведете rems!

A remе основно това: стойността на размера на шрифта, която сте задали на вашия елемент. Харесва това:

html { font-size: 14px; } 

Така че в този документ човек remе равен на 14px.

Това означава, че можем да зададем всичките си размери на шрифта на нашия уебсайт в remединици, като това:

h1 { font-size: 2rem; } nav { font-size: 1rem; } 

И тогава просто ще променим стойността на размера на шрифта за маркера в нашата медийна заявка. Това ще гарантира, че размерът на шрифта за нашите h1и   navелементи също ще се промени.

Ето как променяме remстойността си в медийна заявка:

@media (max-width: 768px) { html { font-size: 14px } } 

И точно така, имаме точка на прекъсване и за всички наши размери на шрифта. Забележете как размерът на шрифта се променя, когато страницата пресича знака от 768 пиксела:

Допълнителен текст

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

Ако се интересувате от продължаване на това учебно пътуване, бих ви препоръчал да разгледате нашия масивен курс по Скримба по темата! Преподава се от един от най-популярните учители в YouTube по темата и ще ви отведе до професионално ниво в отзивчивия уеб дизайн.

Приятно кодиране :)

Благодаря за четенето! Казвам се Per Borgen, аз съм съосновател на Scrimba - най-лесният начин да се науча да кодирам. Трябва да проверите нашия отзивчив уебкамп за уеб дизайн, ако искате да се научите да изграждате модерен уебсайт на професионално ниво.