web-dev-qa-db-ja.com

ブラウザの幅に基づいてテキストサイズを動的に拡大縮小することは可能ですか？

これが対象のプロジェクトです： http://phlak.github.com/jColorClock/ 。ご覧のとおり、現在、テキストサイズは静的なサイズに設定されています。テキストは常にウィンドウの幅の約90％である必要がありますが、それに応じて垂直サイズも拡大縮小します。これを行う比較的簡単な方法はありますか？

javascripthtmlcssxhtml
27
PHLAK

ええええ！

<body>小さなjavascriptを使用してウィンドウのサイズを変更したときのフォントサイズ。 （ここでは便宜上jQueryを使用しました：

$( document ).ready( function() {
            var $body = $('body'); //Cache this for performance

            var setBodyScale = function() {
                var scaleSource = $body.width(),
                    scaleFactor = 0.35,                     
                    maxScale = 600,
                    minScale = 30; //Tweak these values to taste

                var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:

                if (fontSize > maxScale) fontSize = maxScale;
                if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

                $('body').css('font-size', fontSize + '%');
            }

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

            //Fire it when the page first loads:
            setBodyScale();
        });

フォントサイズはemで設定されているため（完璧）、body要素のフォントサイズの割合を調整すると、ユニバーサルな「テキストズーム」として機能します。これはemで設定されたテキストをスケーリングします-より具体的にしたい場合は、<div>スケーリングする要素のみを囲みます。

以下に簡単な例を示します。 http://www.spookandpuff.com/examples/dynamicTextSize.html

47
Ben Hull

これを可能にする新しいユニットがCSS3に追加されました。 Sitepointには概要があります 。あなたは間違いなく古いブラウザにフォールバックを提供したいが、これは断然最もシンプルなソリューションです：

font-size: 35vmin;
12
Stephen M. Harris

精度がそれほど必要ない場合の別のオプション（たとえば、デバイスごとにサイズが異なる場合）は、メディアクエリを使用することです。

5
sbirch

Beejaminの優れた答えと同じですが、いくつかの調整があります。

  1. スケーリングが発生しない「デフォルトの幅」を設定できるように、数学が調整されました。これにより、正確なフォントサイズで指定された幅に簡単に設計できます。

  2. Font-sizeは、html要素で設定され、body要素を解放して、cssでfont-sizeを保持できるようになりました。

$(function() {

  // At this width, no scaling occurs. Above/below will scale appropriately.
  var defaultWidth = 1280;

  // This controls how fast the font-size scales. If 1, will scale at the same 
  // rate as the window (i.e. when the window is 50% of the default width, the 
  // font-size will be scaled 50%). If I want the font to not shrink as rapidly 
  // when the page gets smaller, I can set this to a smaller number (e.g. at 0.5,
  // when the window is 50% of default width, the font-size will be scaled 75%).
  var scaleFactor = 0.5;

  // choose a maximum and minimum scale factor (e.g. 4 is 400% and 0.5 is 50%)
  var maxScale = 4;
  var minScale = 0.5;

  var $html = $("html");

  var setHtmlScale = function() {

    var scale = 1 + scaleFactor * ($html.width() - defaultWidth) / defaultWidth;
    if (scale > maxScale) {
      scale = maxScale;
    }
    else if (scale < minScale) {
      scale = minScale;
    }
    $html.css('font-size', scale * 100 + '%');
  };

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

  setHtmlScale();
});
5
Raine Revere

これを解決する別の方法を次に示します。

このコードは、ルート要素のフォントサイズのサイズを変更するため、正確なピクセル定義を持たない後続のすべてのサイズ変更に比例してサイズ変更されます。

参照幅は、1レムがデフォルトの16ピクセルのサイズで表示されるデフォルトサイズとして指定されます。最小および最大のサイズ変更も提供されます。

デモ： http://jsbin.com/kahabo/1/

JS：

var defaultReferenceWidthPx = 320; // Size at which 1 CSS rem displays as 1 rem.
var minRootFontSizePx = 16.363636016845703;
var maxRootFontSizePx = 1024 / 320 * 16.363636016845703;
var defaultRootFontSizePx = 16.363636016845703; // HTML default for 1 rem.
var rootResizeFactor = defaultRootFontSizePx / defaultReferenceWidthPx;
var docEl; // Document's root element (`html`).

var resizeRoot = function() {
  // Use clientWidth (excludes border & scrollbar) or offsetWidth (includes border & scrollbar).
  var referenceWidthPx = docEl.clientWidth;
  var newRootFontSizePx = rootResizeFactor * referenceWidthPx;
  if(newRootFontSizePx < minRootFontSizePx) {
    newRootFontSizePx = minRootFontSizePx;
  } else if(newRootFontSizePx > maxRootFontSizePx) {
    newRootFontSizePx = maxRootFontSizePx;
  }
  docEl.style.fontSize = newRootFontSizePx + 'px';
};

document.addEventListener('DOMContentLoaded', function() {
  docEl = document.documentElement;
  window.addEventListener('resize', resizeRoot, false);
  resizeRoot();
});

HTML：

<div class="fixed">
  Lorem ipsum dolor sit amet, per iisque omnesque inciderint ex. Has at facete iuvaret pertinacia, vocibus nominavi intellegam per cu.
</div>
<div class="responsive">
  Lorem ipsum dolor sit amet, per iisque omnesque inciderint ex. Has at facete iuvaret pertinacia, vocibus nominavi intellegam per cu.
</div>

CSS：

body {
  margin: 0;
}
.fixed {
  border: solid gray;
  width: 100px;
  padding: 10px;
  border-width: 10px;
  font-size: 10px;
}
.responsive {
  border: solid gray;
  width: 6.25rem;
  padding: 0.5rem;
  border-width: 0.75rem;
  font-size: 0.6rem;
}

リポジトリ： https://github.com/jaepage/wtf-is-rem-in-css

0
jtheletter
  • 一貫したクロスブラウザー互換性
  • ブラウザのズームアクセシビリティを壊したり中断したりすることなく。
  • スタイル属性を変更せずに。
  • フォントをぼかすことなく。
  • ブラウザスニッフィングなし。
  • OSXで動作し、最大化および復元します。
  • ブラウザのズームレベルを検出するコールバックを使用します。

試す Mimetic.js

0
Undefined

JQueryを使用する場合は、 FitText を試してください。テキストを要素の幅に合わせて簡単に拡大縮小できます。

他のオプションは FlowType.JS で、同様の方法で機能します。

0
Ben