是否可以根據瀏覽器寬度動態縮放文本大小？
[英]Is it possible to dynamically scale text size based on browser width?
問題描述
這是以下項目： http ： //phlak.github.com/jColorClock/ 。 如您所見，現在文本大小只是設置為靜態大小。 我希望文本始終是窗口寬度的~90％，但也要相應地縮放垂直尺寸。 有一個相對簡單的方法嗎？
7 個解決方案
解決方案1
47 已采納 2011-03-18 22:42:45
地獄啊！
使用一點點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>上設置百分比font-size， <div>包圍您想要縮放的元素。
這是一個簡單的例子： http ： //www.spookandpuff.com/examples/dynamicTextSize.html
解決方案2
12 2013-07-29 14:55:32
CSS3中添加了新單元，允許您執行此操作。 Sitepoint有一個很好的概述 。 您肯定希望為舊版瀏覽器提供后備，但這是迄今為止最簡單的解決方案：
font-size: 35vmin;
解決方案3
5 2013-04-23 01:06:36
與Beejamin的優秀答案相同，只有幾個調整。
調整了數學運算，以便您可以設置不會進行縮放的“默認寬度”。 這樣可以更容易地使用精確的字體大小設計到給定的寬度。
現在在html元素上設置font-size，釋放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();
});
解決方案4
5 2012-03-07 23:44:04
當您不需要那么多精度（例如，不同設備的幾個尺寸）時，另一種選擇是使用媒體查詢。
解決方案5
0 2014-08-22 05:23:45
這是我發現解決這個問題的另一種方法。
此代碼調整根元素的字體大小，從而按比例調整所有后續大小調整，這些大小調整沒有精確的像素定義。
參考寬度指定為默認大小，其中一個rem以默認的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;
}
解決方案6
0 2014-11-08 14:44:21
如果你使用jQuery，你可能想嘗試FitText 。 它可以讓您輕松地將文本縮放到元素的寬度。
另一個選項是FlowType.JS ，它以類似的方式工作。
解決方案7
0 2017-04-14 11:42:10
- 具有一致的跨瀏覽器兼容性
- 不破壞或破壞瀏覽器的縮放可訪問性。
- 不改變樣式屬性。
- 沒有模糊字體。
- 沒有瀏覽器嗅探。
- 適用於OSX最大化和恢復。
- 使用回調來檢測瀏覽器的縮放級別。
文本大小是否有可能在瀏覽器調整大小時自動減小？
[英]It is possible for the text size to decrease automatically on browser resize?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.