4

Android と IOS で動作するアプリケーションがあります。
このアプリケーションには、HTML を表示する WebView コンポーネントがいくつか
あります。私が見つけたものから、"em" と " viewport " ユニット、および css に "@media" があります。

私は HTML5 と CSS3 を初めて使用します。モバイル デバイスのレスポンシブ フォント サイズの例を教えてください。
私にとって最も重要なことは、携帯電話とタブレットの間だけでなく、モバイル デバイスの異なる画面サイズ (縦向きと横向き) の間でもフォント サイズを変えることです。

編集：

WebView コンポーネントは全画面表示ではなく、テキスト ボックスのサイズであり、サイズは動的です。

4

2 に答える 2

8

メディアクエリでの使用

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

私はフォント サイズに % を使用します。これはフォント サイズの単なる例です。試してみて、最適と思われる % を追加してください

于 2013-07-28T07:55:12.363 に答える
0

最も簡単な方法は、% または em でディメンションを使用することです。ベースフォントサイズをデバイスのデフォルトにして、残りはすべて em にします。

https://stackoverflow.com/a/21981859/406659ですべての方法を見てください

于 2014-02-24T08:08:20.687 に答える