Question

以下是这个项目：http://phlak.github.com/jColorClock/。如您所见，现在文本大小只是设置为静态大小。我希望文本始终是窗口宽度的~90％，但也要相应地缩放垂直尺寸。有没有相对简单的方法呢？

Answer 1

地狱耶！

使用一点点javascript调整窗口大小时设置<body>字体大小。（为了方便起见，我在这里使用了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

Answer 2

CSS3中添加了新单元，允许您执行此操作。 Sitepoint has a good overview。您肯定希望为旧版浏览器提供后备，但这是迄今为止最简单的解决方案：

font-size: 35vmin;

Answer 3

当您不需要那么多精度（例如，不同设备的几个尺寸）时，另一个选择是使用媒体查询。

Answer 4

与Beejamin的优秀答案相同，只有几个调整。

调整了数学运算，以便您可以设置不会进行缩放的“默认宽度”。这样可以更容易地使用精确的字体大小设计到给定的宽度。
现在在html元素上设置了字体大小，释放了body元素以在css中保存字体大小。

$(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();
});

Answer 5

这是我发现解决这个问题的另一种方法。

此代码调整根元素的字体大小，从而按比例调整所有后续大小调整，这些大小调整没有精确的像素定义。

参考宽度指定为默认大小，其中一个rem以默认的16像素大小显示。还提供最小和最大调整大小。

DEMO：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;
}

REPO：https://github.com/jaepage/wtf-is-rem-in-css

Answer 6

如果你使用jQuery，你可能想尝试FitText。它可以让您轻松地将文本缩放到元素的宽度。

另一个选项是FlowType.JS，其工作方式类似。

Answer 7

具有一致的跨浏览器兼容性
不破坏或破坏浏览器的缩放可访问性。
不改变样式属性。
没有模糊字体。
没有浏览器嗅探。
适用于OSX最大化和恢复。
使用回调来检测浏览器的缩放级别。

尝试Mimetic.js

是否可以根据浏览器宽度动态缩放文本大小？

7 个答案: