CSS: базовый размер шрифта (установлен в браузере) и отзывчивый дизайн

Question

CSS: базовый размер шрифта (установлен в браузере) и отзывчивый дизайн

Я попытался создать как можно более отзывчивый сайт (запрет на создание специальных таблиц стилей для iPhone). Для этого я установил все мои размеры шрифта в «em». Наш веб-сайт только что вышел из теста, и один из моих сотрудников отправил мне снимок экрана со своего домашнего компьютера, где размер базового шрифта его Firefox был установлен в 24pt. ([См. Снимок экрана здесь.]). Такой значительно больший размер шрифта (imho) не является тем, что я учитывал в дизайне. Я знаю, что не рекомендуется переопределять пользовательские значения по умолчанию, но где это прежде всего графический опыт (особенно на первой странице), и текст должен оставаться в пределах указанных полей - как вы можете видеть, более крупный шрифт нарушает дизайн.

Вот что я считаю значимыми выдержками из css:

body {
    background: white;
    font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-size: 1em;
    color: #858585;
}

.item.news.priority h2 {
    font-size: 1.25em;
}
.item.news h2 {
    font-size: 0.9em;
}

Вы можете посетить его на www.loeuf.com.

Каковы ваши предложения? Переопределить размер шрифта тела с пиксельным значением или только элементы h2, нарушающие дизайн? Какая практика?

7

добавлено 09 Январь 2013 в 03:35 автор jessica_b отредактировано 11 Июнь 2015 в 09:39

Просмотры: 3

источник

nl ja de tr uk

Значения «em» основаны на фиксированном значении - например, известный - размер шрифта, лучшей практикой было бы установить тело в значении px. Прямо сейчас базовое значение шрифта уже определено в em, поэтому где будет размещаться этот размер браузера? Браузер по умолчанию? Я не знаю, но если вы установите его на 15px (после этого 1 em будет равняться 15px), у вас будет больше контроля над базовым размером, поскольку вы установите его на известное значение, вместо того, чтобы принимать размеры по умолчанию как должное.

добавлено 09 Январь 2013 в 03:41, автор c_kick, источник

Эта ссылка содержит намного больше информации: alistapart.com/articles/howtosizetextincss

добавлено 09 Январь 2013 в 03:43, автор c_kick, источник

Эта ссылка содержит намного больше информации: alistapart.com/articles/howtosizetextincss

добавлено 09 Январь 2013 в 03:43, автор c_kick, источник

@c_kick, самый важный момент использования em теряется, если вы устанавливаете размер шрифта body в пикселях.

добавлено 09 Январь 2013 в 06:19, автор Jukka K. Korpela, источник

@c_kick, самый важный момент использования em теряется, если вы устанавливаете размер шрифта body в пикселях.

добавлено 09 Январь 2013 в 06:19, автор Jukka K. Korpela, источник

Это была моя первоначальная мысль, и, возможно, это подход, с которым я иду, но точка Юкки - это то, почему я уклонился от нее. Я думаю, что я буду тестировать iPad.

добавлено 09 Январь 2013 в 07:31, автор jessica_b, источник

Это была моя первоначальная мысль, и, возможно, это подход, с которым я иду, но точка Юкки - это то, почему я уклонился от нее. Я думаю, что я буду тестировать iPad.

добавлено 09 Январь 2013 в 07:31, автор jessica_b, источник

5 ответы

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Хотя я несколько согласен с комментариями c_kick на использование em , часть действительно отзывчивого дизайна - это позволить пользовательским настройкам вступать в игру. Это означает, что разрешение по умолчанию для браузера остается по умолчанию. В конце концов, вы не знаете, является ли человек, просматривающий ваш сайт, почти слепым и нуждающимся в больших размерах текста из-за этого. Поэтому установка по умолчанию px в теге приведет к аннулированию такого типа «отзывчивости», который, как я считаю, частично соответствует вашему желанию.

Теперь, если вас это не волнует, решение c_kick по установке базы px в теле является допустимым (и самым простым).

Если вы хотите сохранить отзывчивость этого пользователя, но при этом он хорошо работает графически, тогда вам нужно поиграть с одной из двух вещей (я не уверен, что второй можно легко заставить работать, это просто идея, выброшенная в отличие от # 1, что, я уверен, можно было бы сделать для работы):

Либо установите и разрешите масштабирование изображений пропорционально размеру шрифта (таким образом, масштабирование на основе em ) или размер текста, управляющий высотой контейнера, к которой затем масштабируется изображение) , или ...
Настройте margin или padding вокруг этих изображений (но не текстовые поля) на размер em , чтобы "пробел" вокруг изображений масштабируется в некоторой степени, как текст может масштабироваться.

7

добавлено 09 Январь 2013 в 05:40 автор ScottS

источник

Хорошие моменты, не считал это. Благодаря!

добавлено 09 Январь 2013 в 10:34, автор c_kick, источник

Спасибо Скотту. Ваше предложение №1 - это то, что, по моему мнению, возможно, было бы лучшей практикой - но поскольку блог создан в Wordpress, и я уже разрешаю множество настроек и разных переменных для размеров уменьшенных изображений изображений и размера блоков. Это очень динамично, и существует так много разных случаев. Включение масштабирования изображений на основе размера текста браузера по умолчанию, я думаю, будет соломой на спине верблюда по сложности. Я могу ошибаться, хотя, как архитектор, я должен принять такое.

добавлено 09 Январь 2013 в 07:30, автор jessica_b, источник

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Хотя я несколько согласен с комментариями c_kick на использование em , часть действительно отзывчивого дизайна - это позволить пользовательским настройкам вступать в игру. Это означает, что разрешение по умолчанию для браузера остается по умолчанию. В конце концов, вы не знаете, является ли человек, просматривающий ваш сайт, почти слепым и нуждающимся в больших размерах текста из-за этого. Поэтому установка по умолчанию px в теге приведет к аннулированию такого типа «отзывчивости», который, как я считаю, частично соответствует вашему желанию.

Теперь, если вас это не волнует, решение c_kick по установке базы px в теле является допустимым (и самым простым).

Если вы хотите сохранить отзывчивость этого пользователя, но при этом он хорошо работает графически, тогда вам нужно поиграть с одной из двух вещей (я не уверен, что второй можно легко заставить работать, это просто идея, выброшенная в отличие от # 1, что, я уверен, можно было бы сделать для работы):

Либо установите и разрешите масштабирование изображений пропорционально размеру шрифта (таким образом, масштабирование на основе em ) или размер текста, управляющий высотой контейнера, к которой затем масштабируется изображение) , или ...
Настройте margin или padding вокруг этих изображений (но не текстовые поля) на размер em , чтобы "пробел" вокруг изображений масштабируется в некоторой степени, как текст может масштабироваться.

7

добавлено 09 Январь 2013 в 05:40 автор ScottS

источник

Хорошие моменты, не считал это. Благодаря!

добавлено 09 Январь 2013 в 10:34, автор c_kick, источник

Спасибо Скотту. Ваше предложение №1 - это то, что, по моему мнению, возможно, было бы лучшей практикой - но поскольку блог создан в Wordpress, и я уже разрешаю множество настроек и разных переменных для размеров уменьшенных изображений изображений и размера блоков. Это очень динамично, и существует так много разных случаев. Включение масштабирования изображений на основе размера текста браузера по умолчанию, я думаю, будет соломой на спине верблюда по сложности. Я могу ошибаться, хотя, как архитектор, я должен принять такое.

добавлено 09 Январь 2013 в 07:30, автор jessica_b, источник

Инструменты успешного делегирования

Автор: Евгений Попов

Система управления ссылками ReDirector 3.0

Автор: Евгений Попов

Мини-курс по Angular и NgRx

16 видео-уроков

автор Yura · Answer 1 · 2014-03-12T04:41Z

Мне было совершенно полезно указать base font-size в pt и все другие размеры в em .

Так, например, указывая следующую настройку:

html * {
    font-size: 12pt;
}

Я определенно знаю, что каждая буква текста с font-size: 1em будет занимать

12pt = 12 * (1/72 inch) = 12 * 0.35 mm = 4.2 mm in width

независимо от разрешения - будь то 800x600 , 1024x768 или 1920x1200 .

Это значительно упростило проектирование сайта, потому что, если я укажу width: 10em , например. Я определенно знаю, что эта кнопка будет иметь размер 12pt * 10 = 4,2 мм * 10 = 4,2 см .

Кроме того, сайт, сконструированный на мониторе 15 " с разрешением 1920x1200 , выглядит почти тем же самым на 15" с разрешением 1024x768 - это очень удобно для проектирования.

Поэтому в настоящее время я беспокоюсь только о фактических (физических) размерах дисплея и пропорциях , которые не меняются так же сильно, как разрешения и гораздо более предсказуемы.

автор user3904876 · Answer 2 · 2014-08-03T11:07Z

body { font-size: 100%;}

@media all and (max-width: 800px) {
   body { font-size: 200%;}
}

If screen is less than 800 the size of font increase 200%

In your example:

body {
    background: white;
    font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-size: 100%;
    color: #858585;
}

.item.news.priority h2 {
    font-size: 110%; /* +10% */ 
}
.item.news h2 {
    font-size: 90%;  /* -10% */ 
}

автор user3904876 · Answer 3 · 2014-08-03T11:07Z

body { font-size: 100%;}

@media all and (max-width: 800px) {
   body { font-size: 200%;}
}

If screen is less than 800 the size of font increase 200%

In your example:

body {
    background: white;
    font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
    font-size: 100%;
    color: #858585;
}

.item.news.priority h2 {
    font-size: 110%; /* +10% */ 
}
.item.news h2 {
    font-size: 90%;  /* -10% */ 
}