Наконец-то я созрел до того, чтобы начать при верстке использовать относительные единицы измерения em вместо пикселей. Однако для меня это пока не очень удобно, потому что непривычно. Если при пиксельных размерах шрифта достаточно было указать его для родительского элемента, то при использовании em размеры приходится ...
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3. Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю ...
Предлагаю один из возможных вариантов верстки поисковой формы для сайта, которая будет выглядеть вот так: Ее особенность заключается в том, что вся видимая часть формы — это поле ввода текста и нужно учесть, что его ...
Комментарии (58)
Про перевод из px в em тоже был бы рад услышать))
если ты решил перейти на em, то я наверное перейду на дивы))
ps кнопку «отправить коментарий» поярче какнить выдели, у меня все время рука тянется нажать на Subscribe)) кнопка должна быть кнопкой
riddle.pl/emcalc/
Enjoy!
Использование этой штуки снимает 1 и 3 вопросы
Если для элемента font-size равен 14px, то 1em для него будет равен 14px, а, допустим, отступ 2em для него — соответственно 28px. Ну и наследование от родительских элементов учитывается.
По материалам книги Эрика Мейера.
«К чему рекомендуется применять единицы измерения em кроме размера шрифта и высоты строки? Например, для создания отступа между двумя блочным элементами лучше использовать em или px?»
em — ко всему, что должно масштабироваться при изменени масштаба в браузере.
Давай, удачи :)
Она и есть кнопка, просто оформленная под общий дизайн. Мне проще «Subscribe» удалить, чем изменять «Отправить…». С последней все в порядке.
G&Z, вы вообще пост читали, прежде чем давать эту ссылку? Мне не нужен калькулятор, я считать и сам умею…
Для меня наличие данного калькулятора не снимает ни один из заданных мною вопросов, иначе бы я не писал этот пост. Эту ссылку я уже давным-давно знаю.
да… верстка таблицами жива… убиться веником…
Вы представляете шрифт 8px на маке?
http://www2.stack.ru/~julia/Guides/Style.html
рекомендую для прочтения. ссылка не нова «бояном» не обзывать ;)
Ничем от % на мой взгляд не отличается. По сути цель em — абсолютное маштабирование размера шрифта…
Чтобы легче верстать в em’ах, лучше привести размер body к 10px.
Margins и paddings задавать как красивей.
Ширину и высоту задавать в процентах или емах. Кроме случаев с четко ограниченным бэкграундом.
Наследование — самая жопа. Особенно если боди равна 10px, ибо приходится для практически для всего указывать font-size:1.2em, font-size:1.2em, font-size:1.2em :)
Есть много проектов где используется емная верстка. Реализация у всех по разная.
lusever, ты первый из комментаторов сказал то, что я хотел услышать :). Спасибо.
Я как раз так и делаю — указываю для body размер шрифта 62,5%, чтобы привести к 10 пикселям. Наследование действительно самое напряжное. Вот поэтому и не нравятся мне эти em.
Вот только странно, почему elsinor говорит, что 1em = 14px, а не 16px.
cross, на мой взгляд, проще использовать em вместо %, если до этого всегда использовал px, потому что их можно сравнять за счет 62,5%.
1em всетаки равен 16px :)
Для шрифтов экономичнее на символ использовать проценты (120% = 1.2em). Да и читабельность прибавляется. А вот задавая размеры и отступы блока относительно размера шрифта, в процентах не получится, и em единственный выход.
А вот для line-height, em можно опускать (line-height: 1.4).
Цветок, удобно-то, конечно, удобно, но все это шаманство с % и em ради презренного IE, который не умеет масштабировать элементы страницы при использовании пикселей. А им пока пользуется большинство.
lusever, благодарю! Приму к сведению.
Нет ничего проще, чем em. Где нужны масштабируемые размеры, будь то шрифт, будь то бэкграунд, будь то поля и отступы, использую em. Где масштабирование не нужно или искажает верстку — px.и т. д.
Приведение в body: если основной текст сайта 16px, то font-size:100.1%. Если 14px, то font-size:87.5%
Господа, читайте Э. Мейера — все ваши вопросы и заблуждения разрешатся.
>1em всетаки равен 16px :)
Да что Вы такое говорите, а у меня 1em равен 18px :)
На самом деле, данная пропорция определяется настройкой пользователя, а 16px это значение по умолчанию.
Насчет вопроса номер 2. По-моему, em имеет смысл применять и к границам-отступам блочных элементов. Вот, допустим, есть два блока друг над другом и между ними какое-то расстояние. При увеличении размера шрифта межстрочное расстояние в блоках может, например, превысить расстояние между блоками — вполне вероятно, это может не вписаться в диз.
lohmatyi, bukvoed, спасибо за комментарии. Принял к сведению.
claster, мы имели в виду как раз дефолтное значение.
Я не спец в верстке, так просто интересно, чем em лучше пикселей? В последнее время, ты что-то пишешь только о верстке, прям уже и почитать нечего мне :)
Поздновато ты спохватился. Уже народ во всю переходит на IE7 и другие браузеры. Так что, я лично рекоммендую забить на IE6. Моя воля, на все сайты бы повесил скрипт, убиващий отображение сайта в IE6.
Если текст не слишком мелкий, размечен удобно и красиво, то и читаться будет легко, не нужно будет его масштабировать. Всё решает дизайн и юзабилити.