Question

有没有办法让font-size相对于页面的大小？将百分比作为单位应用是指标准字体大小（如12px的90％，而不是页面的90％！）。这与大多数其他标签的行为不同。

是否有任何方法可以使页面“按比例放大”？我应该依赖em吗？

由于

Answer 1

查看新的vh和vw CSS单元。浏览器支持还不是很好。

http://snook.ca/archives/html_and_css/vm-vh-units

最近登陆WebKit： https://bugs.webkit.org/show_bug.cgi?id=27160

在支持它的浏览器中，1 vh是视口高度的1％（1/100），1 vw是视口宽度的1％（1/100）。还有vmin和vmax单位，分别代表两者中较小者和两者中的较大者。

Answer 2

否则您无法以相对于页面大小的百分比设置字体大小。

em中的大小调整是基于相对于字体在16点内正常渲染的大小。

如果您希望自己的页面可以向上和向下缩放并保持某种比例，那么框和字体，然后在em中设置就可以了。

该方法允许缩放页面的字体和方框，使其相对大小相互增长，并且希望不会让事物超出边界和边界。

Answer 3

尝试像FitText这样的jQuery插件。它会自动调整文本大小以适合父元素的宽度。

另一个具有相同目标的jQuery插件是BigText（demo）。

Answer 4

这是我为exacly制作的一个小脚本（当vw不受支持时用它作为后备） https://gist.github.com/2475269

Answer 5

另一个非理想的答案是使用一系列css断点，如下所示：

h1 { font-size: 22px; color: orange; }
@media only screen and (max-width: 900px) {
  h1 { font-size: 20px; color: blue; }
}
@media only screen and (max-width: 800px) {
  h1 { font-size: 18px; color: green; }
}
@media only screen and (max-width: 700px) {
  h1 { font-size: 12px; color: red; }
}

http://jsfiddle.net/8RKhp/

Answer 6

在我看来，网页浏览者看到的明显像素密度范围现在很大，从距离面部12英寸处的HTC One，其中有5600像素/弧度到50英寸等离子屏幕以480p运行，大约950像素/弧度，4英尺。

或者换句话说，等离子屏幕上的20px字体比最新的手机大近6倍。

我做的解决方案是将身体字体大小设置为绝对像素，作为window.screenWidth的倍数，但将其约束为最小单位数，然后将em用于所有字体大小。 em +正确使用标题应该意味着可访问性很好。

我将此函数添加到页面（或它的JS）以设置大小：

function setFontSize() {
    pagesized = window.innerWidth / 30; // Proportionate font size to page
    pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
    pagesized = Math.min(pagesized, 30); // & No greater than 30 px
    document.body.style.fontSize = pagesized; // Set body default font size
}

为了完成这项工作，将以下内容添加到body标签：

<body onresize="setFontSize()" onload="setFontSize()">

然后您只需使用基于％或em单位的CSS（或内联格式），并且事物应该在这些范围内很好地扩展。

或者，在JQuery中，你可以这样做：

$(window).resize(function() {
    pagesized = $(window).innerWidth() / 30; // Proportionate font size to page
    pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
    pagesized = Math.min(pagesized, 30); // & No greater than 30 px
    $('body').css('font-size', pagesized); // Set body default font size
});

Answer 7

至少对于Firefox，1em可用于设置与父级字体大小相关的字体大小。因此，如果将body的font-size设置为与页面大小成比例的值。使用'em'作为单位的正文下的所有字体都将与页面相关。

为此，如果要将大小与宽度相关联，则必须设置相对于页面的正文大小（如height: 100%或宽度。

然后，您必须不断地将身高与字体大小同步。这可以通过'onResize'来完成。

请参阅以下link中的详细信息。

Answer 8

我建议您使用YUI reset统一不同浏览器的字体呈现。然后查看YUI Font Size。在此之后，您可以依靠您的字体正确显示。

Answer 9

你可以这样解决：

jQuery(document).ready(function ($) {

// Dynamisches Skalieren von Schriften
fontSize = function(){
//ww = $(window).innerWidth();
ww = $('.mainhead').innerWidth(); // Width of the Motherelement
one = ww/100; // 1%
multiplcator = one*31; 
$('.mainhead').css({'font-size': multiplcator+'px'});
}
fontSize();



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

});

当你现在通过css设置你的Fontsize时，它会在魅力

等所有浏览器上醒来

.mainhead{
width:48%;
font: normal 2em Times, Verdana, sans-serif;

}

Answer 10

我知道它已经得到了解答，但我需要在将来分享这个comers，因为我需要花费一些宝贵的时间来解决这个问题。

所以@random先生说：em作为一个单位，会做的。

如果您希望自己的页面可以向上和向下缩放并对其自身保持某种比例，那么框和字体，然后在em中设置就可以了。

该方法允许缩放页面的字体和方框，使其相对大小相互增长，并且希望不会让事物超出边界和边界。

将body初始化为1em font-size，表示100%

body {
      font-size: 1em; 
}

然后将您的元素font-size设置为其父母的百分比

.your_element {
 font-size:0.4em /* for example 40% if its parent font-size */
}

现在magic次@media次查询

@media all and (max-width: 767px) {
  body {
    font-size: 0.4em !important;
  }
}

@media all and (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 0.6em !important;
  }
}

@media all and (min-width: 1024px) and (max-width: 1199px) {
  body {
    font-size: 0.8em !important;
  }
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
  body {
    font-size: 1em !important;
  }
}

@media all and (min-width: 1600px) and (max-width: 1999px) {
  body {
    font-size: 1.2em !important;
  }
}

@media all and (min-width: 2000px) and (max-width: 2999px) {
  body {
    font-size: 1.6em !important;
  }
}

@media all and (min-width: 3000px) and (max-width: 3999px) {
  body {
    font-size: 1.8em !important;
  }
}

@media all and (min-width: 4000px) {
  body {
    font-size: 2em !important;
  }
}

宾果，祝你有愉快的一天。

Answer 11

当您说“相对于页面大小”时，您对“页面大小”的具体含义是什么？

浏览器窗口？然后，当用户调整窗口大小时，您的字体会改变大小 - 绝对不是任何人所期望的，并且对可用性非常不利。人们不会调整窗口大小以查看整个站点的更大或更小的表示，他们将它们放大以查看站点的更大的部分，并使窗口更小以查看特定的小部分并具有空间用于浏览器旁边的其他窗口。

如果你的意思是屏幕的大小，那就更糟了，因为它意味着30英寸屏幕上的巨大字体。但人们不买30英寸的屏幕，所以他们可以看到巨大的字体，他们买它们看多个窗口并排。

总而言之，使用em或similay是建立可扩展网站的唯一合理方式，因为它将相对于默认大小进行缩放，这应该是相对于用户可以舒适阅读的大小。

我可以设置相对于页面大小的字体大小吗？

11 个答案: