css、JS フォントサイズを親要素に合わせたい

基本

CSSだけじゃ無理っぽい

頭の片隅にとどめておく内容、考え方

・CSSの「vw」や「vh」などは親要素じゃなくて、ウィンドウサイズに対する割合
・CSSの「%」や「em」などは親要素自体じゃなくて、親要素のフォントサイズに対する割合
・横幅と文字サイズは異なる

やりたいこと

・親要素のサイズに対して、フォントサイズを設定したい（※今回は横幅を設定したい）
・ウィンドウサイズが変わったときに動的に変化させる
・文字数は固定（※文字数の増減でレイアウト崩れ）

注意点

・キャプションやボタンなど目立たせたいトコのみ限定
・文章には適していない（※JSの計算のトコをどうにかすれば対応可能）

サンプルソース

・複数個所で使いたい→idで指定すると面倒
・JS側でサイズを決めたくない→html側で親要素に対する割合を指定

HTML

▼「data-rate="4"」の値は実際に試すしかない・・・

<div class="convFontSize" data-rate="4">〇〇〇〇</div>

※「data-rate="4"」だと親要素の横幅の1/4のサイズをフォントサイズに設定

JS

▼高さを何かしたいなら幅指定（innerWidth()）の設定を変更する

$(window).on('load resize', function(){
  $('.convFontSize').each(function(){
    var pW = $(this).innerWidth();
    var size = pW / $(this).data('rate');
    $(this).css('font-size', size + 'px');
  });
});

※文字サイズの指定なので、文字数の増減でレイアウト崩れが起きる

文字数と文字サイズから縦横のサイズを計算する処理を加えたら文字数の増減のレイアウト崩れも防げる

CSS

特になにもしないけど、サイズやデザインによっては・・・
・「line-height」や「margin-top:-〇〇px」など設定したほうが良いかも
・親要素にmin-widthやmax-widthを設定したほうが良いかも