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

Intereting Posts
Играя в MP3-файл android NDK, используя openSL из памяти Вкладки, действия и вложенные фрагменты Мой проект Android продублировал объявления между Enum и string.xml Где файл .apk помещается в телефон после установки Публиковать файл .aar с javadocs, прикрепленным к artifactory repo Цветовая гамма и артефакты с градиентами, несмотря на использование RGBA_8888 во всем мире Можно ли загрузить новую бета-версию APK в Google Play и удалить существующий APK? Android: гистограмма, меняющая масштаб оси y с помощью ахартайнгина Получение представления для элемента списка ListView / обратного порядка на 2.2; Работает на 4.0.3 Gradle buildConfigField с целочисленной переменной Обнаружение ошибки веб-просмотра и показа сообщений Android – отключить элемент списка, щелкнуть и повторно использовать его. Промежуточный прогресс не работает с ActionBarSherlock, работающим на Gingerbread Как динамически загружать цвет из ресурса на основе 1-го символа текста GetUserMedia Android Webview Ionic