是否有可能根据浏览器宽度dynamic缩放文字大小？
这是这个项目： http : //phlak.github.com/jColorClock/ 。 正如你所看到的，现在文本大小只是设置为一个静态大小。 我希望文本始终是窗口宽度的90％，但也要相应地缩放垂直尺寸。 有没有一个相对简单的方法来做到这一点？
地狱呀！
设置您的<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
在CSS3中添加了新的单元，可以让你做到这一点。 Sitepoint有一个很好的概述 。 您肯定希望为旧版浏览器提供后备，但这是迄今为止最简单的解决scheme：
font-size: 35vmin;
另一个select是，当你不需要太多的精度（比如说，对于不同的设备而言是一对尺寸），就是使用媒体查询。
和Beejamin的优秀答案一样，只需要调整一下。
-
math被调整，以便您可以设置“默认宽度”，在这种情况下不会发生缩放。 这使得devise一个给定宽度的字体更加容易。
-
font-size现在在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 (ie 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 (eg 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 (eg 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(); });
如果你使用jQuery你可能想尝试FitText 。 它使您可以轻松地将文本缩放到元素的宽度。
另一个选项是FlowType.JS ，它以类似的方式工作。
这是我发现解决这个问题的另一种方法。
此代码调整根元素的字体大小，从而按比例调整所有后续大小，没有确切的像素定义。
参考宽度被指定为一个rem以默认的16像素为单位显示的默认大小。 还给出了最小和最大resize。
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
- 具有一致的跨浏览器兼容性
- 不中断或中断浏览器的缩放可访问性。
- 不改变样式属性。
- 而不会模糊字体。
- 没有浏览器嗅探。
- 在OSX上工作最大化和恢复。
- 用callback来检测浏览器的缩放级别。
尝试Mimetic.js
