<div class="container">
  <p>リサイズしてください</p>
</div>

.container {
  container-type: inline-size;
  /* 要素をリサイズ可能にする設定 */
  resize: horizontal;
  overflow: auto;
  min-width: 240px;
}

@container (min-width: 300px) {
  p {
    color: #f4481a;
    font-size: 26px;
    font-weight: bold;
  }
}

/** その他のスタイル */

body {
  font-family: "游ゴシック Medium", YuGothic, YuGothicM,
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 20px;
  display: grid;
  color: #3d424b;
  background-color: #f6f6f6;
  place-content: center;
  height: 100svh;
}

.container {
  border: dotted 1px #aba6a6;
  padding: 12px;
  box-sizing: border-box;
  width: 240px;
  text-align: center;
}