スマホで表示するとはみ出てしまいます

Question

下記のHTML＆cssを、スマートフォンの幅で正しく表示させたいです。

<h1>Let's look for a "partner"!</h1>

h1 {
font: bold 300% Roboto Mono, Monaco, monospace;
border-right: .1em solid #666666;
width: 16.5em;
width: 28ch;
margin: 2em 1em;
white-space: nowrap;
overflow: hidden;
-webkit-animation: typing 3s steps(28, end),
blink-caret .5s step-end infinite alternate;
}
@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

この <h1>Let's look for a "partner"!</h1> をスマートフォンで表示すると、
文字がはみ出て、「Let's look」までしか表示されません。

スマートフォンの画面の幅100%で、Let's look for a "partner"! を表示したいです。
widthを100%にしたり、max-widthを指定したり、思い浮かぶ限りのことは試してみましたが解決できませんでした。

NTMLとcssを始めたばかりの初心者で、必要な情報が欠けているかもしれません。申し訳ございません。
お手数おかけしますが、ご回答宜しくお願い致します。

Answer 1

スマホ表示の際は、以下のように単位「vw」を使ってfont-sizeを指定すると、はみ出ないようになりそうです。

h1 {
  font-size: 5vw; /* 5vwは、ダミーです。好きなサイズを指定してください。 */
}

Comments

[_li____nu]

ありがとうございます！vwという単位があるんですね！勉強になりました。ありがとうありがとうございます。