web-dev-qa-db-ja.com

ウィンドウ幅に基づいてフォントサイズを大きくするにはどうすればよいですか？

テレビやその他の大型モニターに表示されるWebベースのアプリを作成しています。ウィンドウサイズに合わせてフォントサイズをすばやく簡単に増やす方法が必要です。テキストは動的です。

どんな助けでも大歓迎です。 ;）

javascriptcssfontsfont-size
14
Josh Brown

CSS3に興味がある/使用できる場合は、純粋なCSSソリューションがあります-メディアクエリ>> http://www.w3.org/TR/css3-mediaqueries/

したがって、たとえば、CSS：

@media screen and (min-device-width: 800px) { ... }

... 800px以上の画面に表示するときに、ページにさまざまなスタイルを指定できます。明らかに、これは好きなように変えることができます-強力なもの

このリンクの最後にある事前に作成されたJavaScriptを検討することもできます... http://www.themaninblue.com/experiment/ResolutionLayout/#

17
bochgoch

OK-初心者の場合、UIでできるだけ多くの測定にEmsを使用する必要があります。少なくとも、すべてのテキスト要素のサイズを（ピクセルや％ではなく）Emsで設定してください。可能であれば、Emsでレイアウトブロックの幅を設定すると、アプリが比例して拡大縮小するのにも役立ちます。 Emsですべてのサイズを設定できる場合、アプリ全体が視覚的にスケーラブルになります。

Emsの鍵は、親要素のフォントサイズを基準にしてサイズを変更することです。つまり、body要素のフォントサイズを調整することで、すべてのテキストのサイズを比例して調整できます（すべてが体）。

最後のステップは、JavaScriptを使用してビューポートの幅を検出し、それに応じて本文のフォントサイズを設定することです。スケールをどの程度細かく制御するかに応じて、body要素のクラスを使用して事前定義された値のセットを設定するか、フォントサイズ自体を直接操作できます。テストを簡単にするために、可能であれば事前に決められたサイズを使用する傾向があります。

私はjavascriptライブラリを使用して、ビューポート幅の検出を容易にします。これは、ブラウザによって異なることで有名です。 jQueryを使用すると、コードは次のようになります。

$(function(){
  var viewPortWidth = $(window).width();

  if (viewPortWidth > 1900) {$('body').addClass('extraWide')}
  else if (viewPortWidth > 1400) {$('body').addClass('wide')}
  else if (viewPortWidth > 1000) {$('body').addClass('standard')}
  else if (viewPortWidth > 700) {$('body').addClass('narrow')}
  else {$('body').addClass('extraNarrow')}

});

そしてCSS：

<style type="text/css">

  body {font-size:62.5%;}  /* Set the size of 1em to 10px in all browsers */

  body.extraWide {font-size:85%;}
  body.wide {font-size:75%;}

  body.narrow {font-size:50%;}
  body.extraNarrow {font-size:40%;}

</style>

もちろん、これらの値は好きなように調整でき、必要な数の分割を設定できます。これは非常に手っ取り早い解決策ですが、うまくいくはずです。

注-表示されているJavaScriptコードは、ページが読み込まれたときに1回だけスケールを設定します-ウィンドウのサイズを変更してもスケールは調整されません。それは可能な追加ですが、その道を進む前にもっと大きな考慮事項があります。個人的には、ページが読み込まれるたびに再スケーリングするのではなく、セッション全体でユーザーエクスペリエンスの一貫性を保つために、Cookieにスケール値を設定することも考えています。

12
Ben Hull

JapanFourが提供するソリューションのより良いバージョン（私にとって）：

$(document).ready(scaleFont);
$(window).resize(scaleFont);


function scaleFont() {

  var viewPortWidth = $(window).width();

  if (viewPortWidth >= 1900) {$('body').attr('class','extraWide');}
  else if (viewPortWidth >= 1400) {$('body').attr('class','wide');}
  else if (viewPortWidth >= 1000) {$('body').attr('class','');}
  else if (viewPortWidth >= 700) {$('body').attr('class','narrow');}
  else {$('body').attr('class','extraNarrow');}
}

したがって、ウィンドウのサイズが変更された場合にのみサイズが変更され（setTimoutを回避）、必要なクラスのみをbodyに指定します

2
David

これはかなり古い質問で知っていますが、これは多くの検索が可能な質問であるため、とにかく答えます。

メディアクエリ以外にも、純粋なCSSである別のアプローチが実際にあります。

ビューポート単位：vw、vh、vmin、vmax。

これらは、ビューポートの幅（vw）、高さ（vh）、2つのうち小さい方（vmin）、または2つのうち大きい方（vmax）のビューポートサイズの1％を表す長さの単位です。

したがって、たとえば、次を使用できます。

CSS：

body {
    font-size:5vmin;
}

これにより、ドキュメント全体のフォントサイズが最小のビューポートサイズ（幅または高さ）の5％に設定されます。したがって、たとえばiPad（1024 x 768ピクセル）では、font-sizeは38,4 px（これはいずれかのビューポートサイズの最小サイズであるため、768 pxの5％） 。

ブラウザの互換性：https://caniuse.com/#feat=viewport-units

2
Daan

次のコードに何か問題がありますか？メディアクエリが非常に役立つことに同意しますが、ウィンドウが拡大または縮小したときに、ページの特定の要素のフォントサイズを継続的に拡大縮小したいと思いました。このコードは、ビューポートのピクセル幅に基づいてクラス定数を確立する他のjqueryソリューションよりもはるかに単純なようです。

$(document).ready(function() {

  var setFontSize = function() {
    var viewportWidth = $(window).width();
    var fontSize = Math.sqrt(viewportWidth/250);
    $('.myElement').css('font-size',fontSize+'em');
  };

  $(window).resize(function() {
    setFontSize();
  });

  setFontSize();

});
0
ErikAGriffin

Beejaminの回答は期待どおりに機能しました。リアルタイムでスケーリングできるように、タイムアウトを追加しました。ただし、スケールは逆になりません。

$(document).ready(function() {scaleFont();});

    function scaleFont() {

      var viewPortWidth = $(window).width();

      if (viewPortWidth > 1900) {$('body').addClass('extraWide')}
      else if (viewPortWidth > 1400) {$('body').addClass('wide')}
      else if (viewPortWidth > 1000) {$('body').addClass('standard')}
      else if (viewPortWidth > 700) {$('body').addClass('narrow')}
      else {$('body').addClass('extraNarrow')}

      setTimeout(scaleFont, 100); 
    }

編集：解決された逆効果

$(document).ready(function() {scaleFont();});

    function scaleFont() {

      var viewPortWidth = $(window).width();

      if (viewPortWidth >= 1900) {$('body').addClass('extraWide').removeClass('wide, standard, narrow, extraNarrow')}
      else if (viewPortWidth >= 1400) {$('body').addClass('wide').removeClass('extraWide, standard, narrow, extraNarrow')}
      else if (viewPortWidth >= 1000) {$('body').addClass('standard').removeClass('extraWide, wide, narrow, extraNarrow')}
      else if (viewPortWidth >= 700) {$('body').addClass('narrow').removeClass('extraWide, standard, wide, extraNarrow')}
      else {$('body').addClass('extraNarrow').removeClass('extraWide, standard, wide, narrow')}


      setTimeout(scaleFont, 100); 
    }
0
Kris Hollenbeck

これが私のアプローチです（実際のクラスを削除して+ Drupal 7 jQuery）：

(function ($) {
$(document).ready(function() {


var bodyClassArr = new Array('extraWide', 'wide', 'normal', 'narrow', 'extraNarrow', 'mobile');

function setBodyClass(){
  // remove previous classes
  for(x in bodyClassArr){
      if($('body').hasClass(bodyClassArr[x])){ $('body').removeClass(bodyClassArr[x]); }
  }
  var viewPortWidth = $(window).width();
  if (viewPortWidth > 1900) { $('body').addClass('extraWide'); }
  else if (viewPortWidth > 1400) { $('body').addClass('wide'); }
  else if (viewPortWidth > 1000) { $('body').addClass('normal'); }
  else if (viewPortWidth > 700) { $('body').addClass('narrow'); }
  else if (viewPortWidth < 700) { $('body').addClass('mobile'); }
  else { $('body').addClass('normal'); }
};
setBodyClass();

$(window).resize(function() { setBodyClass(); });

}); // jquery end
}(jQuery));
0
user2286309