Html 我可以设置相对于页面大小的字体大小吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1181689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I set font-size relative to page size?
提问by pistacchio
Is there a way to make font-sizerelative to the size of the page? Applying percentage as unit refers to the standard font size (like 90% of 12px, not 90% of the page!). This is different from the behaviour of most of the other tags.
有没有办法使相font-size对于页面的大小？应用百分比作为单位是指标准字体大小（例如 12px 的 90%，而不是页面的 90%！）。这与大多数其他标签的行为不同。
Any way to make the page 'scale up and down' also with fonts? Should I rely on em?
有什么方法可以使页面也使用字体“放大和缩小”？我应该依赖em吗？
Thanks
谢谢
采纳答案by random
No you cannot set the size of the font in a percentage relative to the size of the page.
不，您不能以相对于页面大小的百分比设置字体大小。
Sizing in emis based on the size relative to how the font would normally render in 16 point.
调整大小em基于相对于字体通常以 16 磅呈现的方式的大小。
If you'd like your page to scale up and down and keep some sort of scale to itself, the boxes and the font, then setting it out in emwould be fine.
如果您希望您的页面按比例放大和缩小，并保持其自身、框和字体的某种比例，那么将其设置好em就可以了。
That method will allow for the scaling of fonts and boxes of the page to grow at a relative size to one another and hopefully not have things falling out of bounds and borders.
该方法将允许页面的字体和框的缩放以彼此相对的大小增长，并且希望不会有东西超出边界和边框。
回答by zachleat
See the new vh and vw CSS units. Browser support isn't great yet.
查看新的 vh 和 vw CSS 单元。浏览器支持还不是很好。
http://snook.ca/archives/html_and_css/vm-vh-units
http://snook.ca/archives/html_and_css/vm-vh-units
It landed in WebKit recently: https://bugs.webkit.org/show_bug.cgi?id=27160
最近登陆WebKit：https: //bugs.webkit.org/show_bug.cgi?id =27160
In browsers that support it, 1 vhis 1% (1/100) of the viewport height, and 1 vwis 1% (1/100) of the viewport width. There are also vminand vmaxunits, which represent the smaller of the two and the larger of the two, respectively.
在支持它的浏览器中，1 vh是视口高度的1 vw1% (1/100) 和视口宽度的 1% (1/100)。还有vmin和vmax单位，分别代表两者中的较小者和两者中的较大者。
回答by Ryan McGeary
回答by Julian
Another non-ideal answer is to use a series of css breakpoints like so:
另一个不理想的答案是使用一系列 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; }
}
回答by william malo
Heres a little script I made for exacly that (use it as a fallback when vw isnt supported) https://gist.github.com/2475269
这是我专门为此编写的一个小脚本（当不支持 vw 时将其用作后备） https://gist.github.com/2475269
回答by EdF
In my view, the range of apparent pixel densities seen by the viewer of a webpage is now massive, from an HTC One held at 12 inches from the face, where there are 5600 pixels/radians to perhaps a 50 inch plasma screen running at 480p, which is about 950 pixels/radians at 4 feet.
在我看来，网页浏览者所看到的明显像素密度的范围现在是巨大的，从距离面部 12 英寸的 HTC One 到 5600 像素/弧度的 50 英寸等离子屏幕，运行速度为 480p ，在 4 英尺处约为 950 像素/弧度。
Or put it another way a 20px font is nearly 6x bigger in your field of view on that plasma screen than the latest handset.
或者换句话说，在等离子屏幕上，20px 字体在您的视野中几乎是最新手机的 6 倍。
The solution I cooked up was to set the body font size in absolute pixels as a multiple of the window.screenWidthbut constrain it to a minimum an maximum number of units, then use em's for all font sizes after that. The em's+proper use of headings should mean accessibility is fine.
我提出的解决方案是将正文字体大小（以绝对像素为单位）设置为 的倍数，window.screenWidth但将其限制为最小和最大单位数，然后将 em 用于所有字体大小。em+正确使用标题应该意味着可访问性很好。
I add this function to the page (or it's JS) to set the size:
我将此函数添加到页面（或它的 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
}
To make this work the following is added to the body tag:
为了完成这项工作，将以下内容添加到 body 标签中：
<body onresize="setFontSize()" onload="setFontSize()">
You then just use your CSS (or inline formatting) all based on % or em units and things should scale nicely within those bounds.
然后，您只需使用基于 % 或 em 单位的 CSS（或内联格式），并且事物应该在这些范围内很好地缩放。
Or, in JQuery, you can do:
或者，在 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
});
回答by NawaMan
At least for Firefox, 1emcan be used to set the font size related to the font size of the parent. So if you set font-size of body to a value that is in ratio to the size of the page. All fonts under body that use 'em' as unit will be in relation to the page.
至少对于Firefox，1em可以用来设置与父字体大小相关的字体大小。因此，如果您将 body 的 font-size 设置为与页面大小成比例的值。body 下所有以“em”为单位的字体都与页面相关。
To do that, you must set the size of the body in relation to the page like height: 100%or width if you want to relate the size to the width.
为此，height: 100%如果要将大小与宽度相关联，则必须设置与页面类似或宽度相关的正文大小。
Then, you will have to constantly synchronize the body height with the font size. This can be done with 'onResize'.
然后，您必须不断地将主体高度与字体大小同步。这可以通过“onResize”来完成。
See more detail in the following link.
在以下链接中查看更多详细信息。
回答by Elzo Valugi
I recommend you use YUI resetto unify the font rendering across different browsers. Then check YUI Font Size. After this you can rely on your fonts to display correctly.
我建议你使用YUI reset来统一不同浏览器的字体渲染。然后检查YUI 字体大小。在此之后，您可以依靠您的字体来正确显示。
回答by user1606423
You can solve it like this:
你可以这样解决：
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();
});
});
When you now set your Fontsize via css it wokes on all browsers like charm
当您现在通过 css 设置字体大小时，它会在所有浏览器上唤醒，例如魅力
.mainhead{
width:48%;
font: normal 2em Times, Verdana, sans-serif;
}
回答by MoolsBytheway
I know it's already been answered, but i need to share this for future comers, because it took me some precious minutes to figure this out.
我知道已经有人回答了，但我需要分享这个以备将来使用comers，因为我花了一些宝贵的时间来解决这个问题。
So as mr @random said: emas a unit, will do the trick.
因此，正如@random 先生所说：em作为一个单位，将成功。
If you'd like your page to scale up and down and keep some sort of scale to itself, the boxes and the font, then setting it out in em would be fine.
如果您希望您的页面按比例放大和缩小并保持其自身、框和字体的某种比例，那么将其设置在 em 中就可以了。
That method will allow for the scaling of fonts and boxes of the page to grow at a relative size to one another and hopefully not have things falling out of bounds and borders.
该方法将允许页面的字体和框的缩放以彼此相对的大小增长，并且希望不会有东西超出边界和边框。
Initialise your bodywith 1emas font-sizethat means 100%
初始化你body用1em的font-size是手段100%
body {
font-size: 1em;
}
Then set your element's font-sizeas a percentage of it's parent's
然后将您的元素设置font-size为其父元素的百分比
.your_element {
font-size:0.4em /* for example 40% if its parent font-size */
}
Now the magicof @mediaqueries
现在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;
}
}
And Bingo, have a nice day.
宾果游戏，祝你有美好的一天。
