モバイルに最適なフォントサイズ設定-htmlチュートリアル-php.cn

モバイルに最適なフォントサイズ設定

PHPz

リリース： 2018-05-15 11:01:30

オリジナル

17367 人が閲覧しました

モバイル CSS ユニットの使用方法を説明しましょう。携帯電話ではサイズがたくさんあるので、@media をいくつ書き込む必要があるでしょうか。最も一般的に使用される単位は 2 つあります:
1、rem
rem はルート要素のサイズに相対的に設定されます。Web ページのルート要素はフォントを設定することで rem を制御できます。 HTMLのサイズ。例:

<!DOCTYPE html>
<html>
<head>    
<meta charset="utf-8" />    
<title></title>    
<style type="text/css">        
html{            
font-size:20px;        }        
p{            
width: 600px;            
overflow: hidden;            
line-height: 1;            
font-size: 1rem;        }    
</style></head>    <body>    
<p>        是啊啊啊    
</p></body></html>

ログイン後にコピー

HTML ルート要素で font-size:20px; を設定すると、1rem = 20px; と同様に、10px を設定すると、フォントサイズに 1 rem = 10px; を使用できます。幅などの長さの単位に使用されます。この時点で、このような応答性を実現するにはどうすればよいのかと疑問に思うかもしれません。したがって、@media を組み合わせて HTML ルート要素のサイズを設定し、ページ内の対応するすべての rem ユニットがルート要素に従うようにする必要があります。たとえば、次のようになります。 htmlの場合、16pxがベースとして使用されます。 px よりも優れている点は明らかです。各要素に @media を適用する必要がなく、HTML ルート要素に異なるサイズを設定するだけで済みます。また、互換性も非常に優れています。

2. vw、vh

rem 単位はまだ非常に単純ですが、まだ十分に単純ではなく、vw および vh 単位もあります。

ビューポートの幅に相対します。ビューポートは vw の 100 単位に分割されます。たとえば、1vw は画面幅の 1% に相当します。直接例に行きましょうこのように設定すると、画面の高さの変更に応じて p の幅が変更され、画面幅の変更に応じて高さが変更され、フォントサイズも変更されます。画面。 vw ユニットの柔軟性をより直感的に表現するためにこれを行いました。面倒な @media 記事をたくさん書く必要はもうありません。柔軟な方法とは何ですか?たとえば、p の幅を画面の 50% に設定すると、幅は 50vw になります。このとき、vw を使用しない場合は、高さを幅の 50% に設定する必要があります。計算にはjsのみを使用できます。ただし、vw を使用する場合は、25vw に設定するだけで問題ありません。
ただし、互換性の問題がいくつかあります。Android スマートフォンの内蔵ブラウザには Android システム 4.4 以降が必要です。問題があるのは内蔵ブラウザだけです。しかし、今でも Android の内蔵ブラウザを使ってプレイしている人はいないでしょうか。したがって、vw と vh を使用してください。

以上がモバイルに最適なフォントサイズ設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。