ホームページ > ウェブフロントエンド > htmlチュートリアル > モバイル端末の文字サイズの問題について_html/css_WEB-ITnose

モバイル端末の文字サイズの問題について_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:24:03
オリジナル
1166 人が閲覧しました

1. font-family

サンセリフフォントを使用します

body {    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}
ログイン後にコピー

  • iOS 4.0 以降は、Helvetica を使用するようにダウングレードされた英語フォント Helvetica Neue を使用します

  • 中国語に設定されています太字 STHEi Ti

  • デフォルトのデジタル フォントは Helvetica Neue

    です
  • 追加説明、中国語の太字は iOS フォント ライブラリ (http://support.apple.com/kb/HT5878) には存在しませんが、システムは中国語の太字を自動的に変換します STHEiTi システムのデフォルトの中国語フォント Heiti-簡体字または Heiti-繁体字と互換性があります

    Heiti SC Light Heiti-簡体字中国語 (iOS 7 以降は破棄されました)

    Heiti SC Medium Heiti-簡体字中国語 ブラック
    Heiti TC Light Heiti-Traditional薄いボディ
    Heiti TC Medium 黑体 - 繁中黑

    ネイティブ Android の中国語フォントと英語フォントはどちらもデフォルトのサンセリフ フォントを選択します

  • 4.0 ネイティブ Android の英語フォントとデジタル フォントの以前のバージョンでは Droid Sans が使用され、中国語フォントはネイティブ Android は Droid Sans Fallback を使用します

  • 4.0 以降、中国語と英語のフォントは両方とも Android ネイティブの新しい Roboto フォントを使用します

  • 他のサードパーティ Android システムも、満場一致でデフォルトのサンセリフ フォントを選択します

  • 結論

  • 各携帯電話システムには独自のデフォルトのフォントがあり、Microsoft Yahei はサポートされていません

  • 特別なニーズがない場合、携帯電話で中国語フォントを定義する必要はなく、システムのデフォルトを使用します

  • 英語フォントとデジタル フォントは Helvetica を使用でき、3 つのシステムすべてがサポートされています

  • /* 移动端定义字体的代码 */body{font-family:Helvetica;}
    ログイン後にコピー

    2. rem とは何ですか?

    rem (ルート要素のフォント サイズ) は、ルート要素に対する相対的なフォント サイズの単位を指します。簡単に言えば、相対的な単位です。 rem を見ると、em 単位 (要素のフォント サイズ) を思い浮かべるでしょう。これは、親要素に対する相対的なフォント サイズの単位を指します。これらは実際には非常によく似ていますが、一方の計算ルールはルート要素に依存し、もう一方の計算ルールは親要素に依存して計算される点が異なります。

    2. ビューポート設定を使用してズームします

    多くの Web アプリは、スケーリングのベンチマークとして 320 幅を使用して行われ、最大スケーリングは 320*1.3 = 416 であり、416 までの基本的なスケーリングは互換性があります。 iPhone6 Plusの画面が壊れました。この方法はシンプルで粗雑で効率的です。ただし、一部の学生は、スケーリングによって使用中に一部のページ要素がぼやけると報告しました

    3. rem 適応

    html{    font-size:20px;}.btn {    width: 6rem;    height: 3rem;    line-height: 3rem;    font-size: 1.2rem;    display: inline-block;    background: #06c;    color: #fff;    border-radius: .5rem;    text-decoration: none;    text-align: center;    }
    ログイン後にコピー

    この場合: ルート要素で 20px = 1rem (font-size = 20px の場合)

    全般標準

    4. メディアクエリ設定を使用して適応することもできます

    html {    font-size : 20px;}@media only screen and (min-width: 401px){    html {        font-size: 25px !important;    }}@media only screen and (min-width: 428px){    html {        font-size: 26.75px !important;    }}@media only screen and (min-width: 481px){    html {        font-size: 30px !important;     }}@media only screen and (min-width: 569px){    html {        font-size: 35px !important;     }}@media only screen and (min-width: 641px){    html {        font-size: 40px !important;     }}
    ログイン後にコピー

    3. 画像適応

    REM レイアウトについての説明は終わりましたが、パーセンテージ レイアウトを使用すると同じ効果が得られます。 、次の問題に直面する必要があります:

    画像の幅が 100% の場合、ページが読み込まれるときに高さが崩れる問題が発生します。

    .

    padding-top = (Image Height / Image Width) * 100%
    ログイン後にコピー

    原則:padding-top 値がパーセンテージの場合、値は幅に相対的です

    .cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}.cover img{position: absolute; top: 0; width: 100%;}
    ログイン後にコピー

    参考記事

    https://developer.mozilla.org/zh-CN / docs/Web/Guide/CSS/Media_queries

    https://isux.tencent.com/web-app-rem.html

    http://www.ghugo.com/mobile-h5-fluid-layout-for - iphone6/

    http://alloyteam.github.io/Spirit/modules/Standard/

    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート