Размер шрифта для лучшей практики для мобильных устройств

Ответ 1

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

Итак, в ответ на ваш вопрос: "Есть ли у них" лучшая практика "для мобильных телефонов? - скажем, размер экрана iphone?", да, возможно, есть - но вы можете найти то, что кто-то говорит, что "лучшая практика" не работайте для вашего макета.

Однако, чтобы помочь вам на правильном пути, эта статья о построении гибких макетов служит хорошим примером того, как вычислить базу font-size в пикселях в отношение к размерам экрана устройства.

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

@media (min-width: 858px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 780px) {
    html {
        font-size: 11px;
    }
}

@media (min-width: 702px) {
    html {
        font-size: 10px;
    }
}

@media (min-width: 724px) {
    html {
        font-size: 9px;
    }
}

@media (max-width: 623px) {
    html {
        font-size: 8px;
    }
}

Ответ 2

Основываясь на моем комментарии к принятому ответу, есть много потенциальных ошибок, с которыми вы можете столкнуться, объявив размер шрифта меньше 12px. Объявив стили, которые приводят к вычисленным размерам шрифта меньше 12px, вот так:

html {
  font-size: 8px;
}
p {
  font-size: 1.4rem;
}
// Computed p size: 11px.

У вас возникнут проблемы с браузерами, такими как Chrome с китайским языковым пакетом, который автоматически отображает размеры шрифтов, рассчитанные в 12px как 12px. Итак, верно следующее:

h6 {
    font-size: 12px;
}
p {
   font-size: 8px;
}
// Both render at 12px in Chrome with a Chinese language pack.   
// How unpleasant of a surprise.

Я также утверждаю, что по причинам доступности вы обычно не должны использовать размеры под 12px. Возможно, вы сможете сделать заметку о подписях и т.п., Но опять же - подготовьтесь к удивлению при некоторых настройках браузера и подготовитесь к тому, чтобы заставить вашу бабушку прищуриться, когда она пытается прочитать ваш контент.

Вместо этого я бы выбрал что-то вроде этого:

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.75rem;
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-size: 1.25rem;
}

p {
    font-size: 1rem;
}

@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 480px) {
    html {
        font-size: 13px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 16px;
    }
}

Вы обнаружите, что тонн сайты, которые должны сосредоточиться на доступности, используют довольно большие размеры шрифта, даже для элементов p.

В качестве побочного примечания установка margin-bottom, равная font-size, как правило, также имеет тенденцию быть привлекательной, то есть:

h1 {
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
}

Удачи.

Ответ 3

Все дело в том, что размер относительно базы. Поэтому я бы сказал, что вы можете сохранить размер шрифта, изменив базу.

Пример. Если вы используете 16px, а p -.75em (это 12px), вам нужно поднять базу примерно до 20px. В этом случае p будет равен примерно 15px, что является минимальным требованием для мобильных телефонов.