html - как - размер шрифта для мобильной версии сайта




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

Я видел этот вопрос на SO:

Каковы наиболее распространенные размеры шрифтов для тегов H1-H6, причем это рекомендуемые размеры шрифтов для тегов H:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

Есть ли «лучшая практика» для мобильных телефонов? -say размер экрана iphone?


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

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


Основываясь на моем комментарии к принятому ответу, есть много потенциальных ошибок, с которыми вы можете столкнуться, объявив размер шрифта меньше 12 12px . Объявив стили, которые приводят к вычисленным размерам шрифта менее 12 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;
    }
}

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

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

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

Удачи.







mobile