ヘッダーの縦横比を維持しつつレスポンシブ対応させる方法を知りたい

ヘッダーの縦横比を維持しつつ、画面サイズが小さくなったらヘッダーも縦横比を維持しつつ縮んでいってほしいです。 これ単体ならできるのですが、わたしはその他の要素をremで統一しています。 この画像を見ていただきたいんですが(絵がわかりにくくてすみません)、私は左を望んでいるのですが、右になってしまいます。 要素A要素Bともにremで設定してあり、 となると、ルート要素のフォントサイズの値を大きくすると、remで設置している要素たちが大きくなりますよね。ヘッダー以外はそれを望んでいるんです。なのでヘッダー以外は希望のレイアウトができているのですが、そうするとヘッダーまで大きくなってしまい、ヘッダーの文字サイズも大きくなってしまいます。そうするとレイアウトが崩れてしまうので、どうやったらヘッダーを縦横比やタイトル文字の比率を崩さずレスポンシブ対応させられるのか、いろいろ試しましたが全くうまくいきません。 画面幅1024px以上の時はタイトル20px、ヘッダー40px、768px以上1023pxのときは、タイトル15pxヘッダー30px、などとメディアクエリで固定でやればレイアウト崩れはしないと思いますがそういう感じではなく、自動で画面幅に合うように変わっていってほしいです。 この場合どうすれば良いのか、そのためのやり方というか案を教えてほしいです。 コードはなくて大丈夫です！よろしくお願いいたします。