大・中・小のボタンでサイトの文字サイズ変更をレスポンシブでもしたい

Question

前提・実現したいこと

今時なんですが、サイトに「大」・「中」・「小」のボタンを設置し
フォントサイズを変える処理を入れております。

それをレスポンシブでも対応したいと考えております。

PC閲覧時では「rem」を指定しフォントサイズを変更しているのですが
スマートフォンサイズでは「vw」を指定していきたいのですが「vw」を使うと文字サイズ変更できず悩んでおります。

該当のソースコード

使用しているJavaScriptです

$(function(){
  function initFontSize() {
    var size = (sessionStorage.getItem('fontSize'))? sessionStorage.getItem('fontSize') : '16';
    changeFontSize(size);
  }
  function changeFontSize(size){
    $('html').css('font-size', size + 'px');
    $('[data-font!=' + size + ']').removeClass('active');
    $('[data-font=' + size + ']').addClass('active');
    sessionStorage.setItem('fontSize', size);
  }
  
  function addListeners() {
    $('[data-font]').on('click', function(){
      changeFontSize($(this).data('font'));
    });
  }
  
  function init() {
    initFontSize();
    addListeners();
  }
  
  init();
});

得られた結果

PC閲覧時では（rem指定）思った通りにフォントが大きくなりますが
スマートフォンでは、ボタンを押しても効かない状態です。

Comments

[kyoya0819]

私にはどこにもvwが使われていないように見えるのですが？

[kanifugu]

ご返信ありがとうございます。
またわかりずらく失礼いたしました。

上記JavaScriptを指定した上で、各テキストに「vw」を指定するとフォントが大きくならない。
という意味です。

[FrontEnd_Japan]

>各テキストにvwを指定すると
この部分のコードも記載いただかないと解らないです

[FrontEnd_Japan]

SPでもremで指定すれば効くという認識で合っていますか？？

Answer 1

ラジオボタンとCSSで処理すればよいのでは？

Comments

[yambejp]

<style>
[name="charsize"]{display:none}
#dai:checked ~ .wrap{font-size:1.5em;}
#sho:checked ~ .wrap{font-size:0.8em;}
#dai:checked ~ * [for="dai"],
#chu:checked ~ * [for="chu"],
#sho:checked ~ * [for="sho"]{font-weight:bold;text-decoration:underline;}
</style>
<input type="radio" name="charsize" id="dai">
<input type="radio" name="charsize" id="chu" checked>
<input type="radio" name="charsize" id="sho">
<div>
<label for="dai">大</label>
<label for="chu">中</label>
<label for="sho">小</label>
</div>
<div class="wrap">
テスト
</div>