Taille de police HTML adaptée aux appareils mobiles

Question

J'ai une application qui fonctionne sur Android et IOS.
L'application comporte des composants WebView qui affichent des fichiers HTML
D'après ce que j'ai trouvé, il existe des "em" et des " fenêtre ainsi que les unités "@media". ainsi que "@media" en css.

Je suis novice en HTML5 et CSS3. Quelqu'un pourrait-il me montrer un exemple de taille de police réactive pour les appareils mobiles ?
Le plus important pour moi est d'avoir une taille de police différente entre les téléphones mobiles et les tablettes, mais aussi entre les différentes tailles d'écran des appareils mobiles (pour les orientations portrait et paysage).

EDIT :

Les composants WebView ne sont pas en plein écran, ils ont la taille d'une zone de texte et cette taille est dynamique.

Answer 1

Utilisation dans les requêtes de médias

HTML

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

Ajouter des requêtes de médias

  @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%;
     }    
    }

J'utilise % pour la taille de la police, voici un exemple de taille de police, essayez-la et ajoutez le % qui vous semble le plus approprié.

Answer 2

Le plus simple est d'utiliser des dimensions en % ou en em. Il suffit de laisser la taille de base de la police à la valeur par défaut de l'appareil et d'utiliser le reste en em.

Regardez toutes les façons dont les https://stackoverflow.com/a/21981859/406659

Answer 3

.fonts
  {
    font-size: 5vw;
  } 

"VW" est affiché de manière réactive.