В CSS-правилата се използват два варианта на мерни единици: абсолютен и относителен. Първоначално е била известна само една абсолютна единица за измерване - пиксел. Неговият размер зависеше от матрицата или монитора и беше лесно да се изчисли самостоятелно.
Недостатъци на използването на пиксели
За издателите, работещи върху медиите, на страницата е важно да се подчертае самото съдържание. Той трябва да е четлив, с оптимална дължина на линията и достатъчен размер, така че дори потребителят с ниска видимост да може лесно да възприеме текста. Няма значение кой апарат потребителят чете статия и колко е добро - за него е важно да разбира съдържанието на статията без специални джаджи. Когато използвате пиксели в оформлението, мащабирането често води до намаляване на броя на думите в ред, има неудобни текстови преходи или изобщо съдържанието се изпуска от контейнера. Ето защо, уеб разработчиците и дизайнерите започнаха да използват, когато пишат кодови проценти и относителни единици за измерване, като EM, REM. Но те все още не могат напълно да изтласкат пикселите.
История на появата на относителни единици
Тъй като първите страници в повечето браузъри не са мащабирани, пикселите за дълго време остават единствената възможност за описване на размера на шрифтовете. Но с развитието на уеб технологиите се появи необходимостта от създаване на нови мерни единици. Така имаше ЕМ и%, а след това REM, чиито стойности бяха обвързани със стандартите на браузъра и обикновено се равняваха16 пиксела Има емпирично правило, което съчетава основните размери на шрифта: 100% = 1 em ~ 16px ~ 14pt. Това означава, че ако не промените размера на шрифта във всички детски елементи, по подразбиране в браузъра ще бъде около 16 пиксела и около 14pt (типографска точка), но винаги 100% и 1 em.
Използването на относителни единици за измерване улеснява разположението, което прави модулните елементи по-управляеми. Съвременните технологии изискват при мащабиране на елементите на страниците да се различават по размер в зависимост от екрана на разрешението или прозореца на браузъра на потребителя. Ето защо, EM и REM в CSS са се превърнали в незаменим помощник при създаването на сайтове, които изискват адаптивни размери на шрифтовете. Понастоящем повечето браузъри не изпитват проблеми с мащабирането на текста, а поведението им с увеличаване или намаляване на размера на шрифта съответства един на друг. Но всяко оформление трябва да се проверява в няколко браузъра, включително тези, които са остарели, за да се разбере как ще изглежда крайният резултат за различните потребители.
Използване на относителни единици
Относителните мерни единици, толкова често срещани в типографията и CSS, - EM и REM, са по-рядко известни на средните потребители от пикселите. Не всеки начинаещ дизайнер или плановик разбира целта си и го използва правилно. Между професионалните дизайнери все още има спорове, когато е по-добре да се използва една или друга единица. Независимо от това, относителните единици значително улесняват чувствителността и се считат за най-ефективния метод за конструиране на модулни компоненти. EM и REMИзползват се за задаване на размера на различните елементи - заглавия, граници, рамки. Но техните размери се изчисляват по различен начин.
Какво е EM
EM е относителната единица за измерване, която зависи от размера на шрифта на родителския елемент. Често това е предписано в CSS правилото за теглото на тялото. Този таг определя параметрите на всички елементи на страницата. Как да разберем ЕМ единици в CSS и да изчислим техните стойности? Всичко е съвсем просто. Ако размерът на шрифта (т.е. размерът на шрифта) на селектора на тялото е 10 пиксела, 1 ЕМ е също 10 пиксела, т.е. В резултат на това всички други размери, дадени в ЕМ, ще бъдат изчислени въз основа на тази стойност. Текстовете, чиито параметри са зададени в пиксели и в относителни единици, може да не се различават визуално, докато не трябва да бъдат променени. Но те са много удобни при създаването на гъвкави модулни блокове. Ако не зададете размера на шрифта, но използвайте относителни единици в кода, те ще бъдат изчислени по подразбиране и 1 EM ще бъде 16 пиксела.
Характеристики на единицата за измерване EM
Съществува друга характеристика, когато се използват относителни единици за измерване EM. Ако размерът на шрифта е 2 EM в селектора, тогава, когато използвате EM в параметрите на друго свойство в същия селектор, стойността на тази единица ще се използва по различен начин. В резултат на това размерът на елемента се удвоява. Параметрите на ЕМ се изчисляват въз основа на размера на шрифта в определен блок. Тоест, ако размерът на шрифта на селектора на абзаца (маркерът "p") е равен на 2 EM, и затяло, то е 10 пиксела, след което при добавяне към селектора p размерът на външния ръб на текста ("марж") в дебелината на 1 ЕМ ще бъде равен на 10 и 20 пиксела.
За да получите размер на шрифта, равен на 10 пиксела, трябва да използвате 05 EM. Такива промени в стойностите в различните части на кода често се бъркат от начинаещите занаятчии. Имаше и проблем с използването на EM в CSS - при задаване на размера на шрифта от 0875 EM, всеки следващ прикрепен елемент беше намален. Нежеланите ефекти причиниха употребата на тази единица и марж-дъното. В този случай размерът на шрифтовете се отразява на полетата около елемента, като в EM, пряко свързан с този параметър на блоковия модел.
REM измервания в CSS
Сега да разгледаме каква е единицата за измерване на REM и как да я използваме. Първото споменаване на REM се появи през 2011 г. в коментара към статията на германския разработчик Gerrit van Aaken относно използването на пиксели в CSS кода. Тази относителна единица е близка до ЕМ в нейната стойност, а името й се превежда като "корен ЕМ", или Root Em. Поведението на REM е по-предсказуемо. Използването на тази единица в оформлението улеснява изчисляването на размера на елементите в различните части на кода, тъй като REM в CSS е равна на стойността на размера на шрифта, определен за основния елемент, HTML етикета. Но по-често тази стойност се добавя и в тялото, за да се изключат изчислителните грешки. Използването на REM в CSS, ако неговата стойност не е записана в HTML етикета, е още по-лесно. 1 REM ще бъде равен на стандартните 16 пиксела, както в случая на EM, чиято стойност не е зададена.
Спорове заизползвайте REM в CSS. REM срещу EM
REM и EM имат своите плюсове и минуси. Има много противоречия между операторите, коя относителна единица за измерване се прилага при писане на кода. Смята се, че използването на REM в CSS прави оформлението по-малко модулно, а EM усложнява оформлението и изисква внимателен подход и изчисления. Всеки монтажник в процеса на работа сам избира за себе си, коя единица за измерване и къде да кандидатства. Но на началния етап пикселите все още са по-добри. EM е по-добре за елементи, чиито свойства са мащабирани въз основа на размера на шрифта. В други случаи REM е по-подходящ.
Използване на REM в заглавията
Да разгледаме как ще се променят заглавията на текстовете (тагове h1-h6), ако са написани в REM. Да приемем, че заглавната част съдържа полетата около нея - подложка, фон и определен размер на шрифта. Ако искате да увеличите заглавието, пространството между краищата на елемента ще бъде намалено, така че подложката трябва да бъде преодоляна. Но тогава има проблем с факта, че всички елементи просто престават да се съдържат на страницата. Но има определен размер на шрифта в пиксели, а след това в настройките на браузъра се опитвате да го промените на по-голям, нищо няма да се случи. Когато използвате REM, тя ще се увеличава и намалява в зависимост от предпочитанията на потребителя.
Ограничения на Root Em
REM помага за създаване на каскадни таблици с различни размери на шрифтове за заглавия и параграфи. Това значително опростява оформлението, тъй като не е необходимо да променяте кода напълно - достатъчно е да коригирате размера на шрифта в html маркера. Има и ограничение за използването на тази единица. В по-старите версии на браузърите Opera и IE и внякои браузъри с Android все още не се поддържат. Затова разработчиците са принудени да използват пиксели като резервна опция и да пишат двоен код. Съвременните браузъри ще четат линии с размер на шрифта в пиксели и ще ги превеждат в REM, а остарелите просто няма да видят кода с неизвестна единица за измерване. Но ако забравите за това и започнете да разработвате сайт за определен екран, тогава можете да загубите много потребители, които просто не могат да приемат съдържанието, разбито чрез използването на REM или EM.
Нови начини за определяне на размера на текста
Списъкът на размерите на CSS вече включва не само изброените по-горе опции. Имаше нови елементи:
VW - равна на 1/100 ширина на браузъра. VMIN - 1/100 по-малка страна на прозореца на браузъра. VMAX - 1/100 от по-голямата страна на прозореца на браузъра. VH - равна на 1/100 дължина на браузъра. EX - В зависимост от височината на буквата "x" в долния регистър. CH - се изчислява в зависимост от символа "0" в шрифта на текущия елемент. Повечето от тези опции се използват и за проектиране на гъвкави оформления на сайтове, където размерът на контейнера се измерва в зависимост от размера на прозореца на браузъра. Но за удобно мащабиране на страницата обикновено е достатъчно EM или REM.
