1文字をページに動的に埋め込む方法

ページの中央に1文字しかありません。私はそれが本当に大きい（私は2000％で設定されたフォントサイズを持っています！）。すべての画面の中央に表示されるように、これをどのように反応させるのですか？そのサイズでは、ブラウザのサイズを変更するときに手紙の周りのパディングが問題になります。私は子供たちの手紙を学ぶためにフラッシュカードを作ろうとしています。1文字をページに動的に埋め込む方法

出典

2016-10-11 leonormes

使用viewport units

ビューポートの高さ= 1/100 1vh。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    overflow:hidden; 
 
} 
 

 
div { 
 
    font-size: 99vh; 
 
    text-align: center; 
 
    line-height: 1; 
 
}

<div>A</div>

Codepen Demo

出典

2016-10-11 11:21:56

高さ/幅のどれが最短のビューポートの辺の長さか分からないので、私は 'vh'の代わりに' vmin'を提案します。 – Xenos

@Paulie_D、これは治療になりました。ありがとう – leonormes

あなたは、文字のフォントサイズを設定するvh（ビューポートの高さ）を使用すると、ページ上でそれを中心にFlexを使用することができます。

すなわち：

<body> 
    <div style="display: flex;justify-content: center;"> 
     <div style="align-self: center;"> 
      <span style="font-size: 95vh;line-height:1;">L</span> 
     </div> 
    </div> 
</body>

希望します。

出典

2016-10-11 11:30:18 JazZ

1文字をページに動的に埋め込む方法

答えて

関連する問題