|
Большинство отечественных дизайнеров предпочитают использовать 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
|
|
|
