|
Повечето местни дизайнери предпочитат да използват px, докато повечето чуждестранни сайтове предпочитат да използват em и rem, така че каква е разликата между трите и какви са предимствата и недостатъците на всеки? Нека ви дам подробно въведение. Функции на PX: 1. IE не може да регулира размера на шрифта на тези, които използват px като единица; 2. Причината, поради която повечето чуждестранни уебсайтове могат да бъдат коригирани, е, че използват em или rem като шрифтови единици; 3. Firefox може да регулира px, em и rem, но над 96% от китайските интернет потребители използват браузър (или ядро) IE. пиксели пиксели. Относителни единици дължина. Пикселът на пикселите е относителен спрямо резолюцията на екрана на монитора. (Цитирано от ръководството на CSS2.0) Em е относителна единица за дължина. Размерът на шрифта спрямо текста в текущия обект. Ако размерът на шрифта в реда не е изкуствено зададен, той ще бъде относителен спрямо стандартния размер на шрифта на браузъра. (Цитирано от ръководството на CSS2.0) Стандартната височина на шрифта за всеки браузър е 16px. Всички некоригирани браузъри отговарят: 1em=16px. Тогава 12px=0.75em, 10px=0.625em. За да опростите конвертирането на размера на шрифта, трябва да декларирате font-size=62.5% в селектора на тялото в css, което прави em стойността 16px*62.5%=10px, така че 12px=1.2em, 10px=1em, което означава, че трябва само да разделите оригиналната px стойност на 10 и след това да я замените с em като единица. Характеристики на EM: 1. Стойността на em не е фиксирана; 2. EM наследява размера на шрифта на родителския елемент. Затова когато пишем CSS, трябва да обърнем внимание на две неща: 1. Декларирайте font-size=62.5% в селектора на тялото; 2. Разделете оригиналната стойност на пиксела на 10 и я заменете с em като единица; 3. Преизчислете em стойностите на тези увеличени шрифтове. Избягвайте повтарящи се декларации за размера на шрифта. Тоест, за да се избегне явлението 1.2 * 1.2 = 1.44. Например, ако декларирате размера на шрифта 1.2em в #content, тогава при обявяване на размера на шрифта p, той може да бъде само 1em, а не 1.2em, защото този em не е този em, и става 1em=12px, защото наследява височината на шрифта #content. Характеристики на REM rem е нова относителна единица (root em), добавена към CSS3, която привлече много внимание. Каква е разликата между това устройство и ем? Разликата е, че когато използваш rem за задаване на размера на шрифта за елемент, той все още е относителният размер, но относителният е само HTML кореновият елемент. Това устройство може да се каже, че комбинира предимствата на относителния размер и абсолютния размер, чрез което не само може да модифицира само кореновия елемент, за да коригира всички размери на шрифта пропорционално, но и да избегне верижната реакция от комбиниране на размерите на шрифта слой по слой. В момента REM се поддържа във всички браузъри, с изключение на IE8 и по-старите. За браузъри, които не го поддържат, отговорът също е много прост – да се напише абсолютна единица оператор. Тези браузъри игнорират размера на шрифта, зададен с REM. Ето един пример: p {font-size:14px; размер на шрифта: .875rem; } Бележка:Изборът на шрифтови единици зависи до голяма степен от вашия проект, и ако потребителите ви използват най-новата версия на браузъра, препоръчва се REM, ако съвместимостта е важна – използвайте px, или и двете. Ето адрес на инструмент за конвертиране на px, em, rem единици:http://pxtoem.com/
| 
Публикувано в 21.03.2017 г. 9:31:50 ч.
|
|
|
