Създайте отзивчив сайт с оразмеряване на базата на em

Вероятно сте чували, че трябва да използвате относителни единици за размера на шрифта. Това е добро правило за достъпен уеб дизайн; ако потребителят промени размера на шрифта по подразбиране в браузъра си, това позволява на текста на страницата ви да се промени съответно. Може би сте приели този съвет и сте направили смяната. Може би сте извадили калкулатора си и сте преобразували размера на шрифта на сайта си от абсолютен px единици към ems или, по-вероятно, rems.

как илюстрациите помагат да се разкаже история

Но ако тук сте спрели, пропускате голяма част от гъвкавостта и мощта, които ems внасят в браузъра. Устройството em не е просто заместител на познатото px ; можете да го използвате за повече свойства, отколкото просто размер на шрифта . Ако го направите, някои други негови предимства започват да се появяват.



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



Единици за размер на шрифта

Използването на ems за размера на шрифта може да бъде сложно. Точната стойност се определя от наследения размер на шрифта на елемента (т.е. размера на шрифта на родителския елемент). Това се усложнява, когато започнете да влагате елементи по-дълбоко. Ако елементът има размер на шрифта в ems, неговият родител има размер на шрифта в ems, а родителят му има още един. Ще трябва да умножите всички тези стойности, за да определите действителната изчислена стойност на дъщерния елемент.

Това означава, че поставянето на един и същ модул в различни контейнери може да промени значението на em. Модулът ще бъде непредсказуем.



За да избегнем това, обикновено използваме различна относителна единица за размер на шрифта: rems. Rem (или 'root em') се основава не на наследения размер на шрифта, а на размера на шрифта на основния елемент на страницата, . Това означава, че стойността му е еднаква на цялата страница. Той е по-предсказуем от и често за предпочитане от обикновените ems.

Изграждане на модул с ems

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

Използвайте rems на най-външния елемент, за да установите известен размер на шрифта, след това използвайте ems за изграждане въз основа на тази стойност



Използвайте rems на най-външния елемент, за да установите известен размер на шрифта, след това използвайте ems за изграждане въз основа на тази стойност

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

Ще изградим панел със заглавие и тяло. Маркировката изглежда така:

Behold the power of ems

Consider the ways you can leverage relative units for dynamic sizing of your modules.

Нека стилизираме външния контейнер. Ще зададем размера на шрифта на 1рем за да установим нашата местна стойност. След това ще дефинираме граница-радиус с помощта на ems. Обикновено обичам да използвам px за граница, за да получа хубава фина линия.

.panel { font-size: 1rem; border: 1px solid #678; border-radius: 0.3em; overflow: hidden; }

След това оформете вътрешните елементи. Ще използваме ems за подложка. След това ще увеличим размера на шрифта на заглавието до 1,25 пъти по-голяма от локалната ни em стойност, като ще получим 20px изчислен размер.

.panel-heading { padding: 0.6em 1.2em; background-color: #cde; border-bottom: 1px solid #678; } .panel-heading > h3 { font-size: 1.25em; margin: 0; letter-spacing: 0.03em; } .panel-body { padding: 0.6em 1.2em; }

Можете да умножите стойностите на подложката по техния размер на шрифта, за да определите изчислените им стойности (9,6 пиксела вертикално и 19,2 пиксела хоризонтално). Честно казано, това няма значение. Опитайте се да не се забърквате с перфектни пикселни измервания. Това може да се чувства неудобно, но натиснете. Колкото повече използвате ems, толкова повече ще се запознаете с тях като единица в собствено отношение.

Динамично мащабиране на дизайна

Когато създаваме модули за многократна употреба като този, често откриваме, че се нуждаем от няколко вариации. Кажете, че искахме да създадем по-голяма версия. Ако използвахме px за всичко, това би означавало увеличаване на размера на шрифта, подложката, радиуса на границата и т.н. Тъй като обаче сме дефинирали всичко във връзка с един размер на шрифта, базиран на rem, трябва само да променим тази стойност и целият модул ще отговори:

.panel--large { font-size: 1.2rem; }

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

Модул на панела, с подложки и радиус на границата, определени с помощта на ems

Модул на панела, с подложки и радиус на границата, определени с помощта на ems

По същия начин бихме могли да създадем малка версия:

как да бъда добър видео редактор
.panel--small { font-size: 0.8rem; }

Чрез заземяване на модула, използвайки размер на шрифта от най-високо ниво в rems, го направихме стабилен и предсказуем. Като дефинирахме всичко останало в рамките на използването на ems, направихме мащабируеми всички негови компоненти.

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

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

Това е мощен модел. Можете да използвате този подход за всичко на вашата страница, от падащи менюта до бутони за социални медии. Заземете модула с rem стойност, след това използвайте em за почти всичко останало - от подложки до позициониране до размери на икони.

Правейки го отзивчив

Нека изтласкаме принципа още едно ниво. Оразмерихме модула (и теоретично всички останали модули на страницата), използвайки rems и ems. Това в крайна сметка означава, че размерът им се основава на размера на шрифта на основния елемент. След това можем да коригираме тази единична стойност, за да накараме цялата страница да отговори на свой ред.

Нека въведем друга относителна единица: vh . Изчислената стойност на тази единица се извлича от размера на екрана на потребителя; тя е равна на 1% от ширината на прозореца за гледане. Ако използваме vh единицата, за да определим размера на основния шрифт, той автоматично ще се мащабира адаптивно, без медийни заявки. Задайте размера на шрифта в корена на 2vw :

html { font-size: 2vw; }

За съжаление ефектът е малко прекалено силен. Например на iPhone 6 това ще изчисли 5.5px, което е твърде малко. По същия начин е необосновано голям на по-големи екрани. За да смекчим ефекта, можем да използваме CSS calc () функция:

html { font-size: calc(0.6em + 1vw); }

Сега размерът на шрифта се извлича отчасти от стабилна стойност, а отчасти от отзивчива. Това води до много по-добър ефект. The 0.6ем се държи като някакъв минимален размер на шрифта. Сега root root ще се мащабира плавно от около 13px на смартфон до 21px на среден работен екран.

С вашата страница, съставена от мащабируеми модули, всеки от които е заземен до стойността rem, и те също ще се мащабират с прозореца за гледане. Страницата е структурирана с тристепенна йерархия; можете да промените размера на цялата страница, отделен модул или отделен елемент, като направите просто редактиране на размера на шрифта. Доверете се на ems и rems и браузърът ще се погрижи за работата вместо вас.

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

колко време отнема да научиш майя

Тази статия първоначално е включена в нетно списание брой 288; купете го тук

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