HTML-размер шрифта для мобильных устройств

У меня есть приложение, которое работает на Android и IOS.
В приложении есть несколько компонентов WebView, отображающих HTML
Из того, что я нашел, есть единицы «em» и « viewport », а также «@media» в css.

Я новичок в HTML5 и CSS3, может кто-нибудь, пожалуйста, покажет мне пример отзывчивого размера шрифта для мобильных устройств.
Для меня самое важное – иметь другой размер шрифта между мобильными телефонами и планшетами, а также между различными размерами экрана мобильных устройств (для портретной и альбомной ориентации).

РЕДАКТИРОВАТЬ:

Компонент WebView не является полноэкранным, они имеют размер текстового поля, а размер – динамический.

Использование в медиа-запросах

HTML

<p class="fonts">Administrator</p> 

Добавление медиа-запросов

  @charset "utf-8"; /* CSS Document */ /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { .fonts { font-size: 75%; } } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { .fonts { font-size: 120%; } } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { .fonts { font-size: 120%; } } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { .fonts { font-size: 120%; } } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .fonts { font-size: 150%; } } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { .fonts { font-size: 120%; } } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { .fonts { font-size: 156%; } } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { .fonts { font-size: 200%; } } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { .fonts { font-size: 190%; } } 

Я использую% для размера шрифта, вот только пример размера шрифтов, попробуйте его и добавьте%, что вы считаете лучшим

Самый простой способ – использовать размеры в% или em. Просто позвольте размеру базового шрифта по умолчанию устройства и оставите все в em.

Посмотрите все пути на https://stackoverflow.com/a/21981859/406659