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

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/