我一直在尝试（徒劳地）构建一个页面，其元素会随着我更改窗口大小而调整大小。我让它在 css 中为图像工作没问题，但我似乎无法为文本完成相同的工作，而且我不确定在 CSS 中是否可能。而且我似乎找不到完成此任务的 jquery 脚本。
当用户调整窗口大小时，我本质上希望页面能够动态且流畅地缩放，而无需用户调用页面缩放。这适用于我通过 css 的 img div，但不适用于保持相同大小的文本。
有任何想法吗？
问问题
85461 次
9 回答
34
我不得不自己做这件事。我所做的是为正文设置基本文本大小，并为所有其他大小设置百分比。然后，我使用一个简单的 jQuery 脚本来更改窗口调整大小的基本大小。然后其他尺寸也会更新。
我用过这样的东西：
$(function() {
$(window).bind('resize', function()
{
resizeMe();
}).trigger('resize');
});
在 resizeMe 函数中，我有这个：
//Standard height, for which the body font size is correct
var preferredHeight = 768;
//Base font size for the page
var fontsize = 18;
var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);
于 2010-06-07T13:38:23.927 回答
7
您可以使用CSS3 媒体查询来做到这一点，根据浏览器大小指定不同的基本字体大小。A List Apart上有一篇很好的文章
对于 IE 支持，您可以使用CSS 表达式破解它
这要求您使用固定的基本字体大小，例如在body标签上，以及其他地方的百分比或em基于大小。
于 2010-06-08T08:53:51.997 回答
4
基于 Lizzan 的回答，这是一个使用宽度和高度的平方根来获得比例大小的版本：
// When document has finished loading
$(document).ready(function() {
var resizeText = function () {
// Standard height, for which the body font size is correct
var preferredFontSize = 180; // %
var preferredSize = 1024 * 768;
var currentSize = $(window).width() * $(window).height();
var scalePercentage = Math.sqrt(currentSize) / Math.sqrt(preferredSize);
var newFontSize = preferredFontSize * scalePercentage;
$("body").css("font-size", newFontSize + '%');
};
$(window).bind('resize', function() {
resizeText();
}).trigger('resize');
});
于 2014-01-22T08:56:05.170 回答
3
我正在使用来自http://practicaltypography.com/end-credits.html#bio M. Butterick 的技巧：
<style type="text/css">
<!--adattamento font-size a browser width-->
@media all {html {font-size: 24px;}}@media all and (max-width:2200px){html {font-size: 27px;}}@media all and (max-width:1800px){html {font-size: 26px;}}@media all and (max-width:1400px){html {font-size: 25px;}}@media all and (max-width:1000px){html {font-size: 24px;}}@media all and (max-width:960px){html {font-size: 23px;}}@media all and (max-width:920px){html {font-size: 22px;}}@media all and (max-width:880px){html {font-size: 21px;}}@media all and (max-width:840px){html {font-size: 20px;}}@media all and (max-width:800px){html {font-size: 19px;}}@media all and (max-width:760px){html {font-size: 18px;}}@media all and (max-width:720px){html {font-size: 17px;}}@media all and (max-width:680px){html {font-size: 16px;}}@media all and (max-width:640px){html {font-size: 15px;}}@media all and (max-width:600px){html {font-size: 14px;}}@media all and (max-width:560px){html {font-size: 13px;}}@media all and (max-width:520px){html {font-size: 12px;}}
<!--body-format-->
body {
max-width:1000px;
min-width:520px;
line-height:1.33em;
margin:1em;
background-color:#f7f7f7;
font-family:Source Sans Pro;
color:#361800;
}
</style>
于 2013-08-03T14:32:47.043 回答
3
roryf 是在正确的轨道上！
媒体查询是（其中一个）答案。
这里的诀窍是从 body 开始在任何地方使用 % 来表示字体大小。这样字体大小会被继承，当你在正文中更改它时，它会在任何地方发生变化。
尝试类似：
body { font-size: 100% }
h1 {font-size: 200% }
@media all and (max-width:600px) {
body {font-size: 70%}
}
当网站宽度变得小于 600 像素时，字体大小将变为原来的 70%，其中使用 %（在本例中也是 h1。）
于 2014-01-20T09:06:38.070 回答
0
Lizzans的答案是完美的！将 -1 留在原处！当我把它拿走时，小猫到处都是死的。
而不是 fontsize 变量，只需将其设置为页面的标准字体大小。我的16岁。
于 2013-05-18T00:08:10.097 回答
0
您可以使可调整大小的文本更简单。这个解决方案对我有用。 http://jsfiddle.net/VooDi/dka48dx8/
对于body set font-size，相当于你当前窗口的内宽；
对于 jsfiddle 560 像素；
body {
font-size: 560px;
}
js：
onresize=onload=function() {
document.body.style.fontSize=window.innerWidth+"px"
}
并为所需的元素设置字体大小百分比
<h1 style="font-size:5%">Resize this text!!!!</h1>
就这样。希望这可以帮助某人。
于 2015-02-19T20:26:19.583 回答
0
看看这个：https ://jsfiddle.net/bheng/dp5jh7nu/
$("h1").css("font-size", $(window).width()/5);
$(window).resize(function() {
$("h1").css("font-size", $(window).width()/5);
});
于 2020-11-11T00:00:27.503 回答