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
Значения «em» основаны на фиксированном значении - например, известный - размер шрифта, лучшей практикой было бы установить тело в значении px. Прямо сейчас базовое значение шрифта уже определено в em, поэтому где будет размещаться этот размер браузера? Браузер по умолчанию? Я не знаю, но если вы установите его на 15px (после этого 1 em будет равняться 15px), у вас будет больше контроля над базовым размером, поскольку вы установите его на известное значение, вместо того, чтобы принимать размеры по умолчанию как должное.
добавлено автор c_kick, источник
Эта ссылка содержит намного больше информации: alistapart.com/articles/howtosizetextincss
добавлено автор c_kick, источник
Эта ссылка содержит намного больше информации: alistapart.com/articles/howtosizetextincss
добавлено автор c_kick, источник
@c_kick, самый важный момент использования em теряется, если вы устанавливаете размер шрифта body в пикселях.
добавлено автор Jukka K. Korpela, источник
@c_kick, самый важный момент использования em теряется, если вы устанавливаете размер шрифта body в пикселях.
добавлено автор Jukka K. Korpela, источник
Это была моя первоначальная мысль, и, возможно, это подход, с которым я иду, но точка Юкки - это то, почему я уклонился от нее. Я думаю, что я буду тестировать iPad.
добавлено автор jessica_b, источник
Это была моя первоначальная мысль, и, возможно, это подход, с которым я иду, но точка Юкки - это то, почему я уклонился от нее. Я думаю, что я буду тестировать iPad.
добавлено автор jessica_b, источник

5 ответы

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

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

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

  1. Либо установите и разрешите масштабирование изображений пропорционально размеру шрифта (таким образом, масштабирование на основе em ) или размер текста, управляющий высотой контейнера, к которой затем масштабируется изображение) , или ...
  2. Настройте margin или padding вокруг этих изображений (но не текстовые поля) на размер em , чтобы "пробел" вокруг изображений масштабируется в некоторой степени, как текст может масштабироваться.
7
добавлено
Хорошие моменты, не считал это. Благодаря!
добавлено автор c_kick, источник
Спасибо Скотту. Ваше предложение №1 - это то, что, по моему мнению, возможно, было бы лучшей практикой - но поскольку блог создан в Wordpress, и я уже разрешаю множество настроек и разных переменных для размеров уменьшенных изображений изображений и размера блоков. Это очень динамично, и существует так много разных случаев. Включение масштабирования изображений на основе размера текста браузера по умолчанию, я думаю, будет соломой на спине верблюда по сложности. Я могу ошибаться, хотя, как архитектор, я должен принять такое.
добавлено автор jessica_b, источник

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

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

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

  1. Либо установите и разрешите масштабирование изображений пропорционально размеру шрифта (таким образом, масштабирование на основе em ) или размер текста, управляющий высотой контейнера, к которой затем масштабируется изображение) , или ...
  2. Настройте margin или padding вокруг этих изображений (но не текстовые поля) на размер em , чтобы "пробел" вокруг изображений масштабируется в некоторой степени, как текст может масштабироваться.
7
добавлено
Хорошие моменты, не считал это. Благодаря!
добавлено автор c_kick, источник
Спасибо Скотту. Ваше предложение №1 - это то, что, по моему мнению, возможно, было бы лучшей практикой - но поскольку блог создан в Wordpress, и я уже разрешаю множество настроек и разных переменных для размеров уменьшенных изображений изображений и размера блоков. Это очень динамично, и существует так много разных случаев. Включение масштабирования изображений на основе размера текста браузера по умолчанию, я думаю, будет соломой на спине верблюда по сложности. Я могу ошибаться, хотя, как архитектор, я должен принять такое.
добавлено автор jessica_b, источник

Мне было совершенно полезно указать 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 - это очень удобно для проектирования.

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

5
добавлено
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% */ 
}
0
добавлено
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% */ 
}
0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)