画面サイズが変わっても同じ表示をする方法（ズームイン、ズームアウトのイメージ）

Question

説明が難しい難しいので例を使い説明させていただきます。
検証をした時に、1200px→375pxに変更するとh２の文章が勝手に改行されますが、画面を小さくしても1200pxと同じ表示にしたいです。
普通は文章がはみ出したり、改行がされたりしますが、そのようなこともなく1200pxと全く同じ表示（ズームイン、ズームアウトのイメージといいますでしょうか）にする方法をご教示していただけないでしょうか？
とあるページでそのようなことできていたのですが、自分で解決する事が厳しそうです、、、

<div class="test-contents">
    <img class="image-test" src="./images/test/test.jpg" alt="#">
    <div class="text">
      <h2>これはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストですこれはテストです。</h2>
      <p>これはテストです。</p>
    </div>

img {
  width: 100%;
}

.test-contents {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text h2 {
  font-size: 50px;
}

Comments

[kei344]

「とあるページ」のURLを提示されてはいかがでしょう。

Answer 1

テキストのサイズを横幅に応じて変えたいのでしたら、

.className {
  font-size: 5vw;
}

のように設定を行えばブラウザサイズに応じてテキストのサイズも変更されます。

こちらは詳しい使い方です。
font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する

また、おすすめはしませんが、どうしても10px以下で表示したいなどありましたら、

.className {
  font-size: 10px;
  transform: scale(0.1);
}

のような感じで見た目上は1pxのフォントを指定することもできますので、参考にしてください。
transform:scale()－CSS3リファレンス

Answer 2

文字サイズをvw系で指定すれば良いのでは？