jQuery 根据分辨率更改字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11012724/
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
Change font size depending on resolution
提问by Sonhja
I'm developing a Web page that uses different sizes for its different paragraphs, h... and so on. I'm using emsizes: font-size: 2em;, as an example. But when I change my screen resolution to a lower one, I want that size to a smaller one.
我正在开发一个网页，它对不同的段落使用不同的大小，h...等等。我正在使用em大小：font-size: 2em; ， 举个例子。但是当我将屏幕分辨率更改为较低的分辨率时，我希望该尺寸更小。
For that purpose, I tried this code:
为此，我尝试了以下代码：
<script>
if ( screen.width > 1600)
{
document.write('<style>#centered h1 { font-size: 2em; } </style>');
}
else if (screen.width <= 1600 && screen.width >= 1360)
{
document.write('<style>#centered h1 { font-size: 1.7em; } </style>');
}
else if (screen.width < 1360 && >= 1024)
{
document.write('<style>#centered h1 { font-size: 1.4em; } </style>');
}
else
{
document.write('<style>#centered h1 { font-size: 0.8em; } </style>');
}
</script>
First: it doesn't work...
Second: I think there should be cleaner way to do so...
第一：它不起作用......
第二：我认为应该有更清洁的方法......
So, the question is: how to use different sizes to my fonts or how to make them adjust for different resolutions?
所以，问题是：如何对我的字体使用不同的大小或如何使它们针对不同的分辨率进行调整？
Can anyone help please? Thanks!
有人可以帮忙吗？谢谢！
回答by Vladimir Starkov
Try to use this concept proof CSS:
尝试使用这个概念证明 CSS：
html { font-size: 62.5%; }
body { font-size: 1em;}
@media (max-width: 300px) {
html { font-size: 70%; }
}
@media (min-width: 500px) {
html { font-size: 80%; }
}
@media (min-width: 700px) {
html { font-size: 120%; }
}
@media (min-width: 1200px) {
html { font-size: 200%; }
}
Working demo on jsFiddle
jsFiddle 上的工作演示
回答by Rich Bradshaw
You want to use media queries rather than JS. Alternatively, use JS to add a class to the body then use that to target what you want.
您想使用媒体查询而不是 JS。或者，使用 JS 向正文添加一个类，然后使用它来定位您想要的内容。
回答by christian vazquez
The best solution is Viewport Sized Typography
最好的解决方案是视口大小的排版
There are many reasons. Here are two:
有很多原因。这里有两个：
- There is a such thing as a comfortable line length for reading text on screens. I don't want to kick a hornet's nest, but let's say its around 80 characters. These units allow you to get it feeling perfect and then have that experience scale to any size screen.
- They allow you to tightly couple the size relationship of, say, a typographic header and the content it goes with.
- 在屏幕上阅读文本时，有一种舒适的行长之类的东西。我不想踢马蜂窝，但假设它大约有 80 个字符。这些单元让您感觉完美，然后将这种体验扩展到任何尺寸的屏幕。
- 它们允许您将大小关系紧密耦合，例如，排版标题及其随附的内容。
How they work
它们是如何工作的
One unit on any of the three values is 1% of the viewport axis. "Viewport" == browser window size == window object. If the viewport is 40cm wide, 1vw == 0.4cm.
三个值中任何一个的一个单位是视口轴的 1%。“视口” == 浏览器窗口大小 == 窗口对象。如果视口为 40cm 宽，则 1vw == 0.4cm。
For use with font-size, I guess it's one "letter" that takes on that size, but as we know, in non-mono-spaced fonts the width of a letter is rather arbitrary. I find you just need to tweak around with the values to get it how you want it. Which is basically what we do anyway, right?
为了与字体大小一起使用，我猜它是一个具有该大小的“字母”，但正如我们所知，在非等宽字体中，字母的宽度相当随意。我发现您只需要调整值即可获得所需的值。无论如何，这基本上就是我们所做的，对吧？
- 1vw = 1% of viewport width
- 1vh = 1% of viewport height
- 1vmin = 1vw or 1vh, whichever is smaller
- 1vmax = 1vw or 1vh, whichever is larger
- 1vw = 视口宽度的 1%
- 1vh = 视口高度的 1%
- 1vmin = 1vw 或 1vh，以较小者为准
- 1vmax = 1vw 或 1vh，以较大者为准
h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; }
h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; }
回答by FatalError
You can either use font sizes (em or pt) relative to the screen resolution as lanzz pointed out. Or, you can also use media queries in your css file as per "http://www.w3.org/TR/css3-mediaqueries/#width"
正如 lanzz 指出的那样，您可以使用相对于屏幕分辨率的字体大小（em 或 pt）。或者，您也可以按照“http://www.w3.org/TR/css3-mediaqueries/#width”在 css 文件中使用媒体查询
@media screen and (min-width: 400px) and (max-width: 700px) { … }
you can set any min and max width.
您可以设置任何最小和最大宽度。
回答by lanzz
emsizes are relative to the size of the parent element. You probably want to set your font sizes in ptunits (1pt = 1/72 inch), which are resolution-independent and designed to look the same apparent size in any resolution.
em大小是相对于父元素的大小。您可能希望以pt单位（1pt = 1/72 英寸）为单位设置字体大小，这些单位与分辨率无关，并且设计为在任何分辨率下看起来都相同。
