Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 136
почему не учлись сложности при верстке хотя бы среднего макета?
Очень полезная статья. Я только одного не понял, если по дефолту стоит 100% размер шрифта, то как это выглядит на практике? То есть, если я пишу 16px — то ясно что размер будет 16 пикселей, а если 100% — то это 100 процентов от чего? Поясните пожалуйста.
при 100% скорее всего будет 16px
от стиля по умолчанию в браузере, полагаю
«а если 100% — то это 100 процентов от...»
… значения, указанного в настройках браузера.
… значения, указанного в настройках браузера.
если вы прописываете в body 100% то это будет сто процентов от настроек браузера, каждый пользователь может изменить это значение для конкретно своего браузера? как правило это 16px
все последующие указания размера шрифта будут браться от значения body
все последующие указания размера шрифта будут браться от значения body
Такой подход используется в Yahoo CSS framework
Для body размер шрифта задаётся в PX, а для всех остальных элементов в % от базового размера, заданного в боди
Для body размер шрифта задаётся в PX, а для всех остальных элементов в % от базового размера, заданного в боди
Умолчальные значения кегля шрифта у различных браузеров неодинаковы.
В избранное.
это можно спокойно сделать и не комментируя, не засоряйте ленту :)
XaocCPS, спасибо, внесли каплю ясности в мое понимание едениц измерения для верстки.
Только вот не сильно хочется доверять браузеру выбирать «свой» размер базового шрифта.
Да и тенденция сейчас такова, что браузеры при увеличении не высчитывают пиксели, а делают увеличение как через реальную лупу, это непременно произойдет и на мобильных браузерах, имхо, ждать не долго. Скоро над этим пониманием вообще никто задумываться не будет :)
XaocCPS, спасибо, внесли каплю ясности в мое понимание едениц измерения для верстки.
Только вот не сильно хочется доверять браузеру выбирать «свой» размер базового шрифта.
Да и тенденция сейчас такова, что браузеры при увеличении не высчитывают пиксели, а делают увеличение как через реальную лупу, это непременно произойдет и на мобильных браузерах, имхо, ждать не долго. Скоро над этим пониманием вообще никто задумываться не будет :)
ну ждите, я не против :)
многие до сих пор поддерживают ie6, а вы чего-то нового ждете :)
про ie8 и его масштабирование я чуть ниже отписал, не учитывать этот факт, имхо, нельзя
многие до сих пор поддерживают ie6, а вы чего-то нового ждете :)
про ie8 и его масштабирование я чуть ниже отписал, не учитывать этот факт, имхо, нельзя
Зато хабраюзер, увидев мой комментарий, поймёт, что статья хорошая. =)
Скоро или не скоро, над юзабилити надо думать сейчас прямо. Нет смысла делать сайт, который будет юзабелен тогда, когда все браузеры будут использовать лупу.
Все современные браузеры умеют увеличивать шаблоны в пикселях, без каких-либо заморочек с емами и процентами. Так зачем усложнять себе жизнь и говорить, что «В теории, единицы «em» — это новый и предстоящий стандарт размера шрифта в Интернете»?
ie8 к примеру до сих пор при масштабировании текста поступает так как описано в статье и только функция Zoom у него работает на весь контент, что собственно и не удивительно.
а за мобильные браузеры тоже поручитесь?
а за мобильные браузеры тоже поручитесь?
Никто не ставит емы только на текст, чтобы не поехала вёрстка емы так же ставятся на все размеры блоков, следовательно делают тот же зум, только через емы. Разница между один и тем же шаблоном в px и в em, к примеру в IE7, вообще не заметна при масштабировании. IE8 вообще недоделка и воспринимать её серьёзно пока ещё рано.
На счёт мобильных браузеров, под них вообще отдельно верстать надо и я на их счёт вообще ничего не говорил.
На счёт мобильных браузеров, под них вообще отдельно верстать надо и я на их счёт вообще ничего не говорил.
Я бы предпочел, что бы браузеры не изменяли размер шрифта указанный в px и pt.
Я бы сам хотел решать, масштабировать этот текст или нет. Эксплорер это позволяет, а ФФ2 масштабирует не зависимо от моего желания.
Я бы сам хотел решать, масштабировать этот текст или нет. Эксплорер это позволяет, а ФФ2 масштабирует не зависимо от моего желания.
Ну и сидите на IE6. Кто Вам мешает? :)
Ты наверное сам никогда не пользовался функцией масштабирования по ее прямому назначению.
как раз наоборот, недостаток в том, что картинки бекграундов в px и при верстке в em(при свободном увеличении) сайт смотрится гармонично(как его рисовали в PS) ±4 px, дальше хуже, а при зуме все остается без каких-либо отклонений.
К примеру, в ФФ3, в выпадающем меню Вид -> Масштаб уже есть галочка «Только текст». Что позволяет увеличивать его отдельно от дизайна.
затем, что статистика пользователей говорит нечто очень печальное о количнстве IE6, к сожалению.
Полезно. Но тока что проверил, Опера увеличила страничку вместе со шрифтами (шрифты заданы px).
Оно того стоит?
Оно того стоит?
Стоит.
К сожалению, не все браузеры имеют правильно реализованное масштабирование страниц (взять, к примеру, IE6, которым, тоже к сожалению, пользуется немалый процент пользователей).
А правильное мастшабирование страниц — одно из требований кроссбраузерного кода.
Сам лично пользуюсь em-ами.
К сожалению, не все браузеры имеют правильно реализованное масштабирование страниц (взять, к примеру, IE6, которым, тоже к сожалению, пользуется немалый процент пользователей).
А правильное мастшабирование страниц — одно из требований кроссбраузерного кода.
Сам лично пользуюсь em-ами.
Хорошо, а есть ли смысл поддерживать пользователей IE6? Ведь уже давно появилась седьмая и даже бета восьмой версии. В таком случае у нас получается застой прогресса, а пользователи могут еще долго сидеть на шестой версии. Им же создают для этого все удобства. Да и компьтеры сейчас в основном с Вистой продают, а там ie7 по умолчанию.
я за em
удобно при верстке основываться на размере шрифта в целом для отступов.
удобно при верстке основываться на размере шрифта в целом для отступов.
Объясните мне, дураку. Пользователь будет лезть в css страницы и менять базовый размер? Причем тут em и масштабирование? pt Масштабируется любыми браузерами современными стандартными средствами. Я не стебаюсь, я правда себе уже голову сломал. Может, я чего-то недопонимаю? Как правильно пользоваться emами?
я за px + zoom аля opera
а товарищ заминусовавший пусть объяснит как нормально масштабировтаь элементы дизайна (фоновые картинки и прочее) под увеличенный текст ;)
поддерживаю! высота шрифта в процентах — нет слов, это очень хорошо, но как быть с элементами интерфейса, которые могут и не вместить уеличившийся шрифт? что толку увеличить шрифт и наблюдать как из меню вылезают буквы, как фарш из мясорубки? или как панели превращются в непонятную кашу?
>но как быть с элементами интерфейса, которые могут и не вместить уеличившийся шрифт?
В 90% случаев наличие таких критических элементов определяются фантазиями дизайнера. Может быть начать с этого?
В 90% случаев наличие таких критических элементов определяются фантазиями дизайнера. Может быть начать с этого?
т. е. по вашему главное маштабируемость для плоховидящих, а не дизайн? :)
Дизайн не несет «главной» смысловой нагрузки, главное все таки контент. Правильно?
Дизайн сайта не должен масштабироваться — только текст.
П. С.: У меня отличное зрение, но иногда, читая большую статью, мне приятнее откинуться в кресло и читать не находясь в непосредственной близости от монитора, для этого я увеличиваю шрифт и читаю, а вот увеличенные элементы дизайна в этот момент, мне совсем не нужны.
Дизайн сайта не должен масштабироваться — только текст.
П. С.: У меня отличное зрение, но иногда, читая большую статью, мне приятнее откинуться в кресло и читать не находясь в непосредственной близости от монитора, для этого я увеличиваю шрифт и читаю, а вот увеличенные элементы дизайна в этот момент, мне совсем не нужны.
Как тогда ставить «плюсы» и «минусы» комментариям, если эти мелкие кнопки не видно со спинки стула?
Все должно масштабироваться.
Все должно масштабироваться.
вот и замаштабируй их любитель em ;)
Для меня чтение статьи не заключается в ставке плюсов и минусов. Тут есть два ключевых слова «чтение» и «статьи», а не «оценивание» и «комментарии». Интернет блогами не ограничивается.
А если относительно хабра, то эти кнопочки оценки прекрасно видны, за счет контраста их цвета с остальными элементами.
А если относительно хабра, то эти кнопочки оценки прекрасно видны, за счет контраста их цвета с остальными элементами.
Вы предлагаете переучивать всех дизайнеров и ограничить их полёт фантазии? Чтобы и в так практически однообразном по стилевому оформлению интеренету, осталось пару стандартных шаблонов, которые просто было бы верстать в em-ах?
а для вас важнее уникальный дизайн? по-моему важнее уникальный контент. в книгах только обложки отличаются, а внутри такое однообразие — белый фон и черный текст (ну, за редким исключением). это не контент должен приспосабливаться к дизайну, а совсем наоборот. дизайнеры должны научиться офрмлять контент так, чтобы он и смотрелся замечательно, и масштабировался без проблем, и не мешал
>и ограничить их полёт фантазии?
Ограничения есть в любой дизайнерской сфере. Веб — не исключение. Искусство дизайнера оно в том и заключается, чтобы в жестких рамках технических ограничений найти нетривиальное и красивое решение.
Ограничения есть в любой дизайнерской сфере. Веб — не исключение. Искусство дизайнера оно в том и заключается, чтобы в жестких рамках технических ограничений найти нетривиальное и красивое решение.
Я лично для себя разделил контент и служебную информацию. С проблемой столкнулся ещё в 2000-м году, у шефа со зрением были проблемы (очень большая дальнозоркость, толстенные очки).
Нужно было сделать так, чтобы масштабирование шрифтов работало. Тогда, напомню, в опере не было функции «масштабировать всё». ;)
Оказалось, что на практике достаточно делать контент масштабируемым, а навигацию, разные кнопочки/логины и пр. — нет. На этом решении я остновился, и, в принципе, оно нормально работает.
Второе работающее решение (как здесь уже посоветовал aps) — отказаться от сложного дизайна. Тогда масштабирование навигации или кнопок не ухудшит ситуацию существенно. Хотя, случаи разные бывают.
Нужно было сделать так, чтобы масштабирование шрифтов работало. Тогда, напомню, в опере не было функции «масштабировать всё». ;)
Оказалось, что на практике достаточно делать контент масштабируемым, а навигацию, разные кнопочки/логины и пр. — нет. На этом решении я остновился, и, в принципе, оно нормально работает.
Второе работающее решение (как здесь уже посоветовал aps) — отказаться от сложного дизайна. Тогда масштабирование навигации или кнопок не ухудшит ситуацию существенно. Хотя, случаи разные бывают.
Лучше иметь возможность как-то масштпабировать шрифт, чем не иметь)) А то бывают «мастера» поставят 8 grc? и хоть щурься, хоть убейся((
Все хорошо, но вот разница в масштабировании «em» и "%" есть только в ie.
Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т. е. 12pt = 100%). При использовании "%", ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).
«Во-первых» есть, а хотя бы «во-вторых» — нет.
Абзац закончился.
Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
Это не так.
Многие браузеры (Опера, например, или FF) масштабируют не замечая.
«Во-первых» есть, а хотя бы «во-вторых» — нет.
Абзац закончился.
Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
Это не так.
Многие браузеры (Опера, например, или FF) масштабируют не замечая.
при вёрстке всегда задаю body (font-size: 62,5%) — теперь 1em равен 10px
после этого работаю с элементами задавая размеры почти как в пикселях, например
p ( font-size: 1.2em ) это тоже самое что и p ( font-size: 12px)
для меня это достаточно удобно, и легче прикинуть какой размер будет нужен тому или иному элементу
после этого работаю с элементами задавая размеры почти как в пикселях, например
p ( font-size: 1.2em ) это тоже самое что и p ( font-size: 12px)
для меня это достаточно удобно, и легче прикинуть какой размер будет нужен тому или иному элементу
А разве у всех браузеров в таблице по умолчанию font-size: 16px? А то я для перестраховки в px для body размер шрифта указываю.
тут немного про это
www.webdesignoffice.us/blog/archives/106
www.webdesignoffice.us/blog/archives/106
нет, но font size: 100% = 16px если я не ошибаюсь
читал об этом методе пару лет назад у западного css-гуру и этот метод мне очень понравился, я как раз был в поисках альтернативы пикселям, и не знал на чём остановится — em или процентах.
читал об этом методе пару лет назад у западного css-гуру и этот метод мне очень понравился, я как раз был в поисках альтернативы пикселям, и не знал на чём остановится — em или процентах.
А я всегда делаю html (font-size:100%), body (font-size:0.625em).
Кстати при этом подходе в емах размеры можно указывать не только шрифтам, но и блокам, что дает возможность создания масштабируемых макетов.
Кстати при этом подходе в емах размеры можно указывать не только шрифтам, но и блокам, что дает возможность создания масштабируемых макетов.
Известная тема, но шрифт размером 10px нечитабельный. В результате приходится все равно масштабировать блоки по 1.2em, а потом внутри них давать размеры уменьшенных шрифтов, но уже с новыми масштабными коэффициентами.
Пример с p ( font-size: 1.2em ) тоже, мягко говоря, не очень удачный. Потому как визуальные редакторы имеют обыкновение гадить. Например — окружать таблиыц в тег а внутри таблицы еще параграфов накидать. В результает получается ерунда. Можно конечно подтереть за визивигом, но иногда такая подчистка хуже мусора который визивиг вносит.
Пример с p ( font-size: 1.2em ) тоже, мягко говоря, не очень удачный. Потому как визуальные редакторы имеют обыкновение гадить. Например — окружать таблиыц в тег а внутри таблицы еще параграфов накидать. В результает получается ерунда. Можно конечно подтереть за визивигом, но иногда такая подчистка хуже мусора который визивиг вносит.
Автор темы — любитель холиваров.
Он запостил заведомо халиварную тему, которой уже ни один год.
Чего он этим добился? Сейчас две стороны «за px» и «за em» будут долго долго спорить минусуя друг друга.
Пока что побеждают «em-щики» за счёт «авторитета» автора темы.
Он запостил заведомо халиварную тему, которой уже ни один год.
Чего он этим добился? Сейчас две стороны «за px» и «за em» будут долго долго спорить минусуя друг друга.
Пока что побеждают «em-щики» за счёт «авторитета» автора темы.
я запостил перевод статьи, которая мне понравилась
предлагаю вам запостить топики по-лучше, хотя бы один
предлагаю вам не посещать посты, которые вам не нравятся
предлагаю вам не холиварить в принципе, как поступаю и я
предлагаю к автору обращаться напрямую, а не через третье лицо
предлагаю вам запостить топики по-лучше, хотя бы один
предлагаю вам не посещать посты, которые вам не нравятся
предлагаю вам не холиварить в принципе, как поступаю и я
предлагаю к автору обращаться напрямую, а не через третье лицо
Em-щики побеждают за счет того, что это правильное решение.
www.thenoodleincident.com/tutorials/box_lesson/font/index.html#screens
Хорошая ссылка со сравнением четырёх разных методов задания размера текста и двумя сотнями скриншотов в разных браузерах.
Хорошая ссылка со сравнением четырёх разных методов задания размера текста и двумя сотнями скриншотов в разных браузерах.
боюсь смотреть 200 скриншотов :)
расскажите что там в итоге
расскажите что там в итоге
В итоге всё не так просто и выбирать решение нужно в зависимости от обстоятельств.
В частности неплохой метод — устанавливать базовый размер шрифта для элемента body в процентах (от 60 до 90 и более, в зависимости от желаемого эффекта), а размер текста у элементов в em.
Вот описание: www.thenoodleincident.com/tutorials/typography/incremental_differences.html
В частности неплохой метод — устанавливать базовый размер шрифта для элемента body в процентах (от 60 до 90 и более, в зависимости от желаемого эффекта), а размер текста у элементов в em.
Вот описание: www.thenoodleincident.com/tutorials/typography/incremental_differences.html
Хорошая, только древняя.
не вижу ничего хорошего в емах. столько геморроя при вёрстке и учитывае наследования и только ради ие — уж увольте, он и так на одних костях держится.
Во-первых, не только ради IE :) есть еще мобильные устройства, на которых очень приятно смотреть сайты, с масштабируемыми единицами измерения (продвинутые мобильные браузеры я здесь не имею ввиду, которые тоже имеют клевый зум.).
В идеале — не только шрифты должны иметь относительную размерность, но и все блоки и элементы на странице, у которых есть размерность. Да, это сложно, и иногда даже очень (особенно если делается что-то олдскульное табличное и т. д.), но существуют способы делать сайты интереснее, не основываясь на «табличной» сетке (здесь я имею ввиду не верстку таблицами, а модульную «сетку», которая, по-сути, является таблицей).
Во-вторых — использовать em'ы так же просто, как и px, это дело привычки и опыта.
З. Ы. Кстати, существует прекрасный инструмент для расчета соответствий px и em, при чем эта штука позволяет выстраивать наследование элементов — так что вы никогда не запутаетесь что, от чего зависит, и какой элемент от какого наследует размеры шрифта.
В идеале — не только шрифты должны иметь относительную размерность, но и все блоки и элементы на странице, у которых есть размерность. Да, это сложно, и иногда даже очень (особенно если делается что-то олдскульное табличное и т. д.), но существуют способы делать сайты интереснее, не основываясь на «табличной» сетке (здесь я имею ввиду не верстку таблицами, а модульную «сетку», которая, по-сути, является таблицей).
Во-вторых — использовать em'ы так же просто, как и px, это дело привычки и опыта.
З. Ы. Кстати, существует прекрасный инструмент для расчета соответствий px и em, при чем эта штука позволяет выстраивать наследование элементов — так что вы никогда не запутаетесь что, от чего зависит, и какой элемент от какого наследует размеры шрифта.
а чем плох масштаб в браузере? почему этим должны заниматься верстальщики, а не разработчики софта, ибо вещь это сугубо софтовая :)
Потому, что это — работа верстальщика — сверстать сайт качественно и доступно, а не разработчиков софта, которые однажды пошли на уступки хреновым верстальщикам (сделали браузеры более лояльными к коду) — и теперь мы видем полный бардак в этом плане (у каждого браузера «какое-то своё» понимание о стандартах). И появление «зума» в браузерах — это точно такие же уступки по отношению к разработчикам.
Но не об этом речь. А о том, что, так называемая, «доступность» — это задача одновременно актуальная и для разработчиков софта, и для тех, кто делает, скажем, сайты. Так что если у вас есть возможность повлиять на это, используя существующие инструменты, почему бы это не сделать?
Сложность — это не «отмазка». По вашей логике получается так, что людям которые пишут книги — не нужно в совершенстве знать грамматику и вообще правила языка — об этом, видите ли, должны позаботиться разработчики софта (я имею ввиду проверку правописания, которая сейчас даже в браузеры, встроена). И эта тенденция «подстраивания» софта, которая осуществляет «подмену» ценностей, честно говоря, ужасает. С одной стороны — да, все круто, «технологии в массы!» «доступность!», а с другой — сейчас вполне обычно, когда человек с высшим образованием, при написании электронных документов проверку правописания доверяет софту (читать, как «возлагает обязанности на софт»)… По-моему это негативная тенденция.
P.S. Все выше — это моя точка зрения, которая может не совпадать с общепринятой.
Но не об этом речь. А о том, что, так называемая, «доступность» — это задача одновременно актуальная и для разработчиков софта, и для тех, кто делает, скажем, сайты. Так что если у вас есть возможность повлиять на это, используя существующие инструменты, почему бы это не сделать?
Сложность — это не «отмазка». По вашей логике получается так, что людям которые пишут книги — не нужно в совершенстве знать грамматику и вообще правила языка — об этом, видите ли, должны позаботиться разработчики софта (я имею ввиду проверку правописания, которая сейчас даже в браузеры, встроена). И эта тенденция «подстраивания» софта, которая осуществляет «подмену» ценностей, честно говоря, ужасает. С одной стороны — да, все круто, «технологии в массы!» «доступность!», а с другой — сейчас вполне обычно, когда человек с высшим образованием, при написании электронных документов проверку правописания доверяет софту (читать, как «возлагает обязанности на софт»)… По-моему это негативная тенденция.
P.S. Все выше — это моя точка зрения, которая может не совпадать с общепринятой.
Помоему статья давно не актуальна. Пока версии Эксплорера не «зумирующие», аналогично Фаерфоксу или Опере, и преволировалировали среди большой массы пользователей, приходилось выкручиватся с комбинацией ем и процентов (так как при использовании одной из величин шаг при увеличении шрифта был слишком большим). Сейчас слава богу ситуация не та. Поэтому правильно использовать каждую единицу по назначению. Пиксели для экрана, пункты для печати, ем там где нужна зависимость от пропорции строки (к примеру когда блок должен быть приблизительно равен 40 символам в ширину, а не фиксированому значению), а процент для гибкости в псолдеующей правке ЦСС (когда задается базис у боди того же а от него размеры уже наследуются, и при необходимости смены базиса для той же печатной версии, например, необходимо будет переопределить уже только базис а не все стили связаные с размером шрифта).
Статья для спецов не интересна, а для тех кто только приступил к изучению данной темы будет даже вредна, так как сбить может с пути правильного.
Статья для спецов не интересна, а для тех кто только приступил к изучению данной темы будет даже вредна, так как сбить может с пути правильного.
Уже в комментариях проходила мысль, но продублирую — для CMS с визуальным редактором далеко не всегда хороши em и % — можно напороться на большие проблемы с наследованием. Либо надо ограничивать и редактор, и пользователей, чтобы ничего не испортили.
Для верстки под мобильные можно использовать отдельный css, как и под версию для печати (pt). А вообще для широкоформатных мониторов будущее за функцией zoom броузеров — если дизайнер ограничил ширину блока, то при увеличении шрифта вам придется долго и нудно читать узкую полоску текста. С Zoom таких проблем нет.
Для верстки под мобильные можно использовать отдельный css, как и под версию для печати (pt). А вообще для широкоформатных мониторов будущее за функцией zoom броузеров — если дизайнер ограничил ширину блока, то при увеличении шрифта вам придется долго и нудно читать узкую полоску текста. С Zoom таких проблем нет.
Не поверите, но вот вчера встала проблема сделать текст масштабируемым, засыпал с этой мыслью, а тут ответ прям сразу, спасибо!
LOL
Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения.дальше можно не читать. Автор — мегачайник, т. к. не знает про существование единицы ex.
Не чайник, это точно. Скорее, это особенности обучения.
Либо, что вероятнее, автор просто не стал плодить сущности, и точно так же не стал перечислять разного рода дюймы, сантиметры и пики. С точки зрения использования em и ex идентичны, 1.2em = 1.2ex = 120%.
Либо, что вероятнее, автор просто не стал плодить сущности, и точно так же не стал перечислять разного рода дюймы, сантиметры и пики. С точки зрения использования em и ex идентичны, 1.2em = 1.2ex = 120%.
Вы наверное сильно удивитесь, но 1.2em не равны 1.2ex и не равны 120%. Так как em и ex потому и являются «маштабируемые» единицы измерения (как сказано в статье), а точнее коэффициэнтом пропорции относительно габаритов шрифта. Еще точнее коэффициэнт пропорции относительно высоты букв в верхнем и нижнем регистре, следовательно и о соотношении между этими величинами можно говорить только в контексте определенного шрифта, так как соотношение между ними от шрифта к шрифту различные.
Согласен, правильнее было бы написать ~ вместо =. Естественно, я имел в виду не равно, а эквивалентно.
Что же касатеся «контекста шрифта», то здесь не согласен. Сам коэффициент, конечно, зависит от гарнитуры, но поскольку единицы относительны, сделать «на 20% больше» можно любую из них, результат будет одинаковым.
Что же касатеся «контекста шрифта», то здесь не согласен. Сам коэффициент, конечно, зависит от гарнитуры, но поскольку единицы относительны, сделать «на 20% больше» можно любую из них, результат будет одинаковым.
Вложу в топик свои пять копеек :-)
В большинстве браузеров кегль100% == 16px. При вычислении относительных величин, особенно при наследовании, есть нюансы:
— IE округляет результат в большую сторону.
— FF округляет результат в меньшую сторону.
— Opera, округляя результат в меньшую сторону, получает значения в пикселах для родительского и дочернего объекта, после чего вычисляет итоговое значение.
Пример: задавая значение 110% получаем:
— IE: 18px
— FF: 17px
Для получения одинакового результата (18px) используем дробное значение в 112.5%.
В большинстве браузеров кегль100% == 16px. При вычислении относительных величин, особенно при наследовании, есть нюансы:
— IE округляет результат в большую сторону.
— FF округляет результат в меньшую сторону.
— Opera, округляя результат в меньшую сторону, получает значения в пикселах для родительского и дочернего объекта, после чего вычисляет итоговое значение.
Пример: задавая значение 110% получаем:
— IE: 18px
— FF: 17px
Для получения одинакового результата (18px) используем дробное значение в 112.5%.
Прощу прощения.
Иногда встречается следующая конструкция:
font: 100%/1.5em Georgia,Arial,Verdana;
что есть "/" в данном случае, и 1.5em? Междустрочный интервал?
Иногда встречается следующая конструкция:
font: 100%/1.5em Georgia,Arial,Verdana;
что есть "/" в данном случае, и 1.5em? Междустрочный интервал?
Пожелание всем верстальщикам: не пользуйтесь пикселями! Указывайте размеры в ем-ах (там, где надо ессно), чтоб ваш сайт масштабировался при смене шрифта!
Спасибо, пользователь
Спасибо, пользователь
А мне пункты нравятся… ничего лишнего не разъезжается.
По количеству комментов можно судить о том, что этот вопрос из серии «священных войн», «религиозных вопросов», имхо :)
Упрощая. Шрифт указывать в %, а масштабируемые отступы указывать в em?
Полезная статья, мне, многое прояснила!
Автор статьи, картинки в статье уже не грузятся :)
Новая ссылка на оригинал, с картинками. Также в обновленном посте есть небольшое обновление =)
Никак не могу понять разницу между em и %, у меня в браузере все одинаково, если кому несложно поясните.
Спасибо за статью.
Весьма интересно.
Весьма интересно.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
CSS Font-Size: em vs. px vs. pt vs. percent