保守性の高いレスポンシブ にフォントサイズを変更の仕方

Question

フロント開発初心者で今回レスポンシブにデザインが切り替わる画面を開発しているおり、PC画面からスマホ画面に切り替わる時、下記画像のように一番上のテキストのサイズが大きいので少し小さくしようと思ってますが下記のコードではうまくいきませんでした。

bootstrap4で簡単にサイズを変えられるクラスがあるならそれが一番良いのだと思うのですが、おそらく別途CSSで@mediaを使いfont-sizeを上書きする必要があるような気がします。ですがCSSで個別に設定するのは自分以外の人が見たときにわかりづらいのでなるべく使わない方が良いとも聞きます。
CSSの設計パターン的に保守性が高いお勧めの書き方があれば教えていただきたいです。

#事象

から、、、

上記のように"Rcomenndoed・・・"のテキストが次の行にはみ出てしまてます。
どうにかして"Rcomenndoed・・・"のテキストをいい具合に一行で一行で収めたいのですが。。。

#コード
HTML(laravelのbladeから抜粋)

   	<div class="container">
	   <div class="row">
			<h1 class="cul title"> ????Recommended shop????</h1>
			<h5 class="cul d-flex align-items-end ">お気軽に推しのお店を登録ください</h5>
		</div>

		<div class="card">
			<div class="card-header"><i class="fa fa-fw fa-globe"></i> <strong>Browse Ramen</strong> <a href="/my-crud/add" class="float-right btn btn-dark btn-sm"><i class="fa fa-fw fa-plus-circle"></i> Add Ramen</a></div>
			<div class="card-body">

				<div class="col-sm-12">
					<h5 class="card-title"><i class="fa fa-fw fa-search"></i> Find Ramen</h5>
					<form action="/my-crud" method="post" autocomplete="off">
						@csrf
						<div class="row">
							<div class="col-sm-2">
								<div class="form-group">
									<label>Shop Name</label>
									<!-- 商品名 -->
									<input type="text" name="name" id="name" class="form-control" 
									value="{{ isset( $view_data['input_val'] ) ? $view_data['input_val']['name'] : null }}" placeholder="Enter Name">
								</div>
							</div>
							<div class="col-sm-2">
								<div class="form-group">
									<label>Average price</label>
〜〜以下省略〜〜


・CSS（実際はscssに記述してます）
@media (min-width: 560px) {
  .title {
    font-size: ○○px;　　　　//スマホサイズになったら一行で収まる程度のサイズにしたい
  }
}
このCSSではうまく行きませんでした。

Comments

[m.ts10806]

>bootstrap4で簡単にサイズを変えられるクラスがあるなら
https://getbootstrap.com/docs/4.5/content/typography/#responsive-font-sizes
レスポンシブなフォントサイズについてはドキュメントで言及されていますが、こちらでは？

[Lhankor_Mhy]

「スマホサイズになったら一行で収まる程度のサイズにしたい」とのことですが、「スマホサイズ」とは、どのようなスクリーンサイズをイメージしていますか？

[shoco]

>Lhankor_Mhyさん
アイフォンXのサイズに見合うサイズです。

>m.ts10806さん
ありがとうございます。

[Lhankor_Mhy]

> アイフォンXのサイズに見合うサイズ

では、375pxで1行にできればいい、ということですね？
350pxとかは考慮しなくてもよい、という理解で合っていますか？

[shoco]

>Lhankor_Mhyさん
そうですね。他の機種にも対応させたいため375〜355のpx幅で対応させたいと思っております

Answer 1

こんばんは。

「375〜355のpx幅で対応」という狭い範囲であれば、vw単位で微調整しながら指定するといいのかもしれませんね。

サンプル

@media (max-width: 375px) { // mix と max を間違えている
  .title {
    font-size: calc( 100vw / 13 ); 
    // 13 の数字はブラウザ・OS・フォントによって異なると思うので調整する。等幅フォントが使われると崩れる。
    // もし .container が入れ子であるならば、さらに調整する
  }
}

Comments

[shoco]

ありがとうございます。どうにかうまくできそうです。
それとこの13って数値は何を基準に出てきた数字なのでしょうか？

[Lhankor_Mhy]

emojiが2文字と半角16文字なので、2+16/2=10をスタートにして色々試しました。

プロポーショナルフォントは試行錯誤しかないです。
等幅フォントをfont-familyに指定してしまうのも手だと思います。
https://www.bugbugnow.net/2020/02/font-family-mono.html