— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.

Сделал за последнее время:

Добавил в портфель около 48-и новых работ:
Сделал очень много всяких штук при работе над поддержкой сайтов.
Как бы это теперь в портфель запихнуть?

Заказать мне работу

20.01

Переходим на em

Комментарии (33) CSS, HTML

Сейчас мы за одну минуту перестанем указывать размеры шрифта в пикселях и станем указывать их в em. (давно вообщем то пора)

Итак, вот такая конструкция:

html{
font-size:100.01%;
}

body{
font-size:62.5%;
}

font-size:100.01%; – установили шрифт стандартного размера (16px). Почему я написал 100.01%? Это из-за проблем округления в Opera и Safari. Незнаю может уже пофиксили, но я навсякий случай продолжаю так писать.

font-size:62.5%; – Что бы не мучаться с математикой устанавливаем размер шрифта в 10px. Один раз посчитали, и хватит

Как пользоваться:

Например, нам нужен размер заголовка 24px, тогда пишем так: font-size:2.4em;
т.е 24px = 2.4em. Визаульное сходство прослеживается?

На что надо обратить внимание:

EM наследуется! Поэтому добрый совет, прописывайте размер шрифта непосредсвенно тегу с текстом. Тоесть если у вас такой код:

<div id="sidebar">
<p>текст</p>
<p>текст</p>
<p>текст</p>
</div>

то следует писать не #sidebar{font-size:1.2em;}, а #sidebar p{font-size:1.2em;}. Поверьте, так гораздо меньше гемора. Если же вам приходится указывать размер шрифта вложенному элементу, например:

`Новинки Все новинки`

, а у родителя уже указан размер, то код будет такой:

h2{
font:normal 2.4em Arial; // 24px
}

h2 a{
font-size:0.5em; //12px
}

Математика тут элементраная: делем желаемое, на имеемое (12px/24px=0.5em)

Сорри за сжатую форму поста, наступила зима, сессия продрала свои налитые кровью глазки и возалкала свежей крови. Аминь.

Метки:CSS, HTML

Также интересно будет почитать про:
Если в контенте много “жирного” текста: Порой дизайнеры создают вот такие штуки:Создавать для каждого типа “жирности” отдельный класс не кажется мне кошерным вариантом. Во-первых, не изящно. Во-вторых, тексты заносят в основном люди далекие от веба, и...
Центрирование “плавающего” меню: Потрясающее в своей элегантности решение. Обязательно должно быть на заметке у каждого.html, body { margin: 0; padding: 0; font-family:Tahoma, Arial, Helvetica, sans-serif; background-color: #fff; }.navi { width: 775px; /*Устанавливаем фиксированную ширину*/ position: relative; overflow: hidden; font-size: .8em; border: 1px...
Изящное отсеивание спама: Делаем в форме дополнительное поле и прячем его стилями от пользователя. Пользователь не видит поле и не заполняет его, а бот заполнит. Затем проверяем поле на стороне сервера на заполненность....
Пара тегов которые не должны встречаться в хорошем коде: Встречая на своем пути более-менее приличный дизайн, я, так или иначе, открываю код и порой встречаю, древние как мамонты (о существовании некоторых я и вовсе не подозревал) элементы, и когда...
Некоторые моменты начертания Arial и Tahoma.: У пары этих шрифтов при небольшом кегле наблюдаются некоторые особенности, которые необходимо помнить при создании макета, учитывая возможный редизайн.Так у Tahoma bold 9px и 10px не меняется начертание, а только...

1
tapazukk (21.01.2008) #
Немнога занудства, для html-то зачем устанавливать шрифт, когда вполне достаточно для body 65,2%, которые от дефолтных 16-px высчитывают необходимые 10px?
2
Brando (21.01.2008) #
Спасибо за статью…ак действительно намного проще и быстрее
3
quwi (21.01.2008) #
(12px/24px=12px) ? Возможно, (12px/24px=0,5 em) ?
4
le`Mur (21.01.2008) #
Brando, рад что пригодилось.
quwi,точно. Спасибо за замечание, пофиксил
tapazukk, в браузере пользователем может быть установлено другое значение отличное от 16px. 100,01% сбрасывает его на дефолтные.
5
Dimox (21.01.2008) #
Этот пост написан, словно ответ на мой недавний вопрос
6
le`Mur (21.01.2008) #
Dimox, ага есть такое )
7
Nikita (22.01.2008) #
Уже надо переходить на px и убивать IE6. А ты только сейчас предлагаешь перейти на em
По теме:
А не лучше ли тогда написать так:
font-size:6.25%;
тогда, по идее 1em будет равняться 1px. Или сотые не работают?
8
le`Mur (22.01.2008) #
Уже надо переходить на px и убивать IE6. А ты только сейчас предлагаешь перейти на em
Не, я давно уже перешел. Это я читателям сообщаю. А, вообще, бабки на завалинках рекут, мол, IE8 всех спасет.
А не лучше ли тогда написать так:
font-size:6.25%;
тогда, по идее 1em будет равняться 1px.
Любопытно. Я потестирую.
9
Денис Радченко (23.01.2008) #
Проясните меня темного, зачем переходить на em, если размер шрифта все равно указывается жестко?
10
Nikita (23.01.2008) #
Денис Радченко, это всё для нашего «любимого» IE6. В нём нельзя будет менять размер шрифта если шрифт указан в px.
11
TNT (23.01.2008) #
to tapazukk
Немнога занудства, для html-то зачем устанавливать шрифт
Никогда не слышали про “Extreme font-resizing bug”, если нет – почитайте. Заданием для font-size исправляется этот баг, хоть это и не главное его свойство, но баг очень неочевиден…
12
tapazukk (25.01.2008) #
to TNT
в такой формулировке еще не слышал о_O
Хотя, да, метода верная, сделать контрольный выстрел для html, просто невстречал ранее.
13
le`Mur (25.01.2008) #
А не лучше ли тогда написать так:
font-size:6.25%;
тогда, по идее 1em будет равняться 1px.
Как я и обещал потестил. Подобная запись не работает в Opera. Да и дефолтный шрифт ставиться уж очень маленьким.
14
Михаил Валенцев (31.01.2008) #
Собственно, указываю размеры в em’ах (ну и font-size:100.01%, разумеется).
Такое вот замечание:
В последней работе решил попробовать с
font-size:62.5%;
- в диком браузере Konqueror шрифты получаются чуть меньше размером. Возможно, что откажусь от приема – буду уже по привычке расставлять размеры “на глаз”.
15
Максим Покровский (31.01.2008) #
101% для html указывали?
16
Михаил Валенцев (31.01.2008) #
100.01 разумеется
17
Максим Покровский (31.01.2008) #
Я как то тестил (давно уже) нормально было. А может случайно шрифт в браузере меньше поставил? У меня была схожая ситуация с FF? когда было различие в 1 пиксель. Оказалось я просто колесико мышки крутнул с зажатым CTRL.
18
vladfrandom (12.03.2008) #
внесу свои 5 копеек.
Универсальнее будет:
body{
font-size:64%;
}
Спасибо товарищу Опере за веселое округление дробей.
19
Максим Покровский (12.03.2008) #
Почему это?
20
лей (31.03.2008) #
[оффтопик]
У вас ссылки с портфолио не рабочие (старый редирект).
http://pokrovskii.com/2008/01/20/perehodim-na-em/
21
Максим Покровский (31.03.2008) #
Большое спасибо за наблюдательность!
22
Shu (03.06.2008) #
гм
а чем pt хуже?
Обычно указываю размер шрифта в point-ах )
23
Максим Покровский (03.06.2008) #
Потому что pt по разному интерпритируются OC.
12pt на PC, выглядят по другому на Mac. Браузерами кажется тоже, сейчас точно не помню.
24
Shu (03.06.2008) #
ага)
спасибо! Буду знать и учиться
25
Jman (11.07.2008) #
как я когда то уже говорил, при переходе на em, ещё одним инструментов верстальщика становится калькулятор. Особенно если em-ами проставляем еще отступы и размеры . Кстати когда экспериментировал. Все размеры проставил в ем, так чтобы когда в браузере увеличивался шрифт, увеличивались и отступы и размеры картинок. Маленькая резиновая страничка с хедером и футером, плюс один сайдбар, и 4 картинки… насчитался я тогда на год вперёд.
26
Mike (07.03.2009) #
Не знаю как вообще, но конкретно на этой странице при попытке сохранить ссылку на эту статью на delicious.com некорретно отображается и сохраняется url и title
Приходиться руками править
Советую потестировать
27
Веб дизайн (08.04.2009) #
Создавая сайт мы пользуемся PSD макетом в котором указанны размеры либо в pt либо в px. Возникает вопрос:? С какой целью пользоваться em?
Уважаемы автор! Вы очень полезный код выкладываете. Грамотно его расписываете. Но главную задачу не указываете. В связи с чем, убедительная просьба указывайте пожалуйста цель темы.
Просто как мы не старались так и не поняли зачем это.
Заранее благодарны!
28
Максим Покровский (08.04.2009) #
Создавая сайт мы пользуемся PSD макетом в котором указанны размеры либо в pt либо в px. Возникает вопрос:? С какой целью пользоваться em?
em масштабируется в IE6. C учетом, что большинство вебмастеров упорно продолжают его поддерживать, технология верстки на em продлиться еще максимум год.
29
Gray (23.06.2009) #
для перевода px в em удобно использовать сервис . http://riddle.pl/emcalc/
30
Максим Покровский (23.06.2009) #
Не удобно. Метод описанный в статье — удобнее.
31
miha_conan (19.07.2009) #
— XP была бы отличной ОС,если бы с ней не поставлялся браузер.
Ага….
А Windows 98 была бы отличной ОС, если бы с ней не поставлялся Windows 98
32
Михаил (06.10.2009) #
Максим, я некоторое время пытался верстать на голых em’ах, но нашел два недостатка: первый, не очень существенный – бэкграунды не тянутся и масштабирование в ie6 идет коту под хвост. А второй представляет из себя такую проблему: допустим, у нас 1em = 10px, очень удобно, но базовый размер шрифта, естественно, нечитабельный. Не пробелма, прописываем для параграфов, списков и прочих текстообразующих элементов font-size: 1.4em;. Казалось бы – все отлично, но тут появляется вложенный список или параграф в списке, или заголовок, в общем любые два вложенных элемента и все идет коту под хвост. Можно, конечно, написать ul ul {font-size: 1em;}, но мне кажется, что это как-то не по-джедайски, отчаянием и темной стороной попахивает. Что скажете, Максим?
33
Максим Покровский (06.10.2009) #
>> Казалось бы – все отлично, но тут появляется вложенный список или параграф в списке, или заголовок, в общем любые два вложенных элемента и все идет коту под хвост.
В статье написано решение: “Математика тут элементраная: делем желаемое, на имеемое (12px/24px=0.5em)”
Но учитывая, что IE6 сходит на нет, то можно указывать размеры и в пикселях, но мне и в em’ах не сложно.