CSS 中的响应式字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15649244/
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
Responsive font size in CSS
提问by user2213682
I've created a site using the Zurb Foundation 3grid. Each page has a large h1:
我已经使用Zurb Foundation 3网格创建了一个站点。每个页面都有一个大的h1：
body {
font-size: 100%
}
/* Headers */
h1 {
font-size: 6.2em;
font-weight: 500;
}<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div>
<!-- End Tagline -->
</div>
<!-- End Row -->When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for the large text.
当我将浏览器调整为移动尺寸时，大字体不会调整并导致浏览器包含水平滚动以容纳大文本。
I've noticed that on the Zurb Foundation 3Typography example page, the headers adapt to the browser as it is compressed and expanded.
我注意到在Zurb Foundation 3Typography示例页面上，标题在压缩和扩展时适应浏览器。
Am I missing something really obvious? How do I achieve this?
我错过了一些非常明显的东西吗？我如何实现这一目标？
采纳答案by Peter Featherstone
The font-sizewon't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press Ctrland +together on the keyboard while in the browser.
在font-size调整浏览器窗口时，就不会这样回应。相反，它们会响应浏览器缩放/文字大小设置，例如，如果您在浏览器中同时按下键盘上的Ctrl和+。
Media Queries
媒体查询
You would have to look at using media queriesto reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.
您将不得不考虑使用媒体查询以在某些时间间隔内减小字体大小，从而开始破坏您的设计并创建滚动条。
For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking:
例如，尝试在底部的 CSS 中添加它，更改 320 像素宽度以适应您的设计开始破坏的位置：
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
Viewport percentage lengths
视口百分比长度
You can also use viewport percentage lengthssuch as vw, vh, vminand vmax. The official W3C document for this states:
您还可以使用视口百分比长度，例如vw，vh，vmin和vmax。为此，W3C 官方文档指出：
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。
Again, from the same W3C document each individual unit can be defined as below:
同样，从同一个 W3C 文档中，每个单独的单元可以定义如下：
vw unit - Equal to 1% of the width of the initial containing block.
vh unit - Equal to 1% of the height of the initial containing block.
vmin unit - Equal to the smaller of vw or vh.
vmax unit - Equal to the larger of vw or vh.
vw unit - 等于初始包含块宽度的 1%。
vh unit - 等于初始包含块高度的 1%。
vmin 单位 - 等于 vw 或 vh 中的较小者。
vmax unit - 等于 vw 或 vh 中的较大者。
And they are used in exactly the same way as any other CSS value:
它们的使用方式与任何其他 CSS 值完全相同：
.text {
font-size: 3vw;
}
.other-text {
font-size: 5vh;
}
Compatibility is relatively good as can be seen here. However, some versions of Internet Explorer and Edge don't support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.
兼容性比较好，可以看这里。但是，某些版本的 Internet Explorer 和 Edge 不支持 vmax。此外，iOS 6 和 7 的 vh 单元存在问题，该问题已在 iOS 8 中修复。
回答by SolidSnake
You can use the viewport value instead of ems, pxs, or pts:
您可以使用视口值代替 ems、pxs 或 pts：
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;
}
From CSS-Tricks: Viewport Sized Typography
来自 CSS-Tricks：视口大小的排版
回答by csuwldcat
I've been playing around with ways to overcome this issue, and believe I have found a solution:
我一直在寻找克服这个问题的方法，并且相信我已经找到了解决方案：
If you can write your application for Internet Explorer 9 (and later) and all other modern browsers that support CSS calc(), rem units, and vmin units. You can use this to achieve scalable text without media queries:
如果您可以为 Internet Explorer 9（及更高版本）和所有其他支持 CSS calc()、rem 单位和 vmin 单位的现代浏览器编写应用程序。您可以使用它来实现无需媒体查询的可扩展文本：
body {
font-size: calc(0.75em + 1vmin);
}
Here it is in action: http://codepen.io/csuwldcat/pen/qOqVNO
回答by Albert Xing
Use CSS mediaspecifiers (that's what they [zurb] use) for responsive styling:
使用 CSSmedia说明符（这就是他们 [zurb] 使用的）进行响应式样式：
@media only screen and (max-width: 767px) {
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
}
回答by Javi Stolz
If you don't mind to use a jQuery solution you can try TextFill plugin
如果您不介意使用 jQuery 解决方案，您可以尝试 TextFill 插件
jQuery TextFill resizes text to fit into a container and makes font size as big as possible.
jQuery TextFill 调整文本大小以适应容器，并使字体尽可能大。
回答by aWebDeveloper
There are several ways to achieve this.
有几种方法可以实现这一点。
Use a media query, but it requires font sizes for several breakpoints:
使用媒体查询，但它需要几个断点的字体大小：
body
{
font-size: 22px;
}
h1
{
font-size: 44px;
}
@media (min-width: 768)
{
body
{
font-size: 17px;
}
h1
{
font-size: 24px;
}
}
Use dimensions in % or em. Just change the base font size, and everything will change. Unlike the previous one, you could just change the body font and not h1 every time or let the base font size be the default of the device and the rest all in em:
使用% 或 em 中的尺寸。只需更改基本字体大小，一切都会改变。与前一个不同，您可以每次只更改正文字体而不是 h1 或让基本字体大小为设备的默认值，其余全部在em：
- “Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12 pt, 1 em is equal to 12 pt. Ems are scalable in nature, so 2 em would equal 24 pt, .5 em would equal 6 pt, etc..
- Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12 pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
- “Ems”(em)：“em”是一个可扩展的单位。一个em等于当前的font-size，比如文档的font-size是12pt，1em就等于12pt。em 本质上是可扩展的，所以 2 em 等于 24 pt，0.5 em 等于 6 pt，等等。
- 百分比 (%)：百分比单位很像“em”单位，除了一些基本差异。首先，当前字体大小等于 100%（即 12 pt = 100%）。在使用百分比单位时，您的文本对于移动设备和可访问性保持完全可扩展。
CSS 3supports new dimensions that are relative to the view port. But this doesn't work on Android:
CSS 3支持与视口相关的新尺寸。但这不适用于Android：
- 3.2vw = 3.2% of width of viewport
- 3.2vh = 3.2% of height of viewport
- 3.2vmin = Smaller of 3.2vw or 3.2vh
3.2vmax = Bigger of 3.2vw or 3.2vh
body { font-size: 3.2vw; }
- 3.2vw = 视口宽度的 3.2%
- 3.2vh = 视口高度的 3.2%
- 3.2vmin = 3.2vw 或 3.2vh 中的较小者
3.2vmax = 3.2vw 或 3.2vh 中的较大者
body { font-size: 3.2vw; }
See CSS-Tricks ...and also look at Can I Use...
回答by Yuri P.
There's another approach to responsive font sizes - using rem units.
还有另一种响应字体大小的方法 - 使用 rem 单位。
html {
/* Base font size */
font-size: 16px;
}
h1 {
font-size: 1.5rem;
}
h2 {
font-size: 1.2rem;
}
Later in media queries, you can adjust all fonts sizes by changing the base font size:
稍后在媒体查询中，您可以通过更改基本字体大小来调整所有字体大小：
@media screen and (max-width: 767px) {
html {
/* Reducing base font size will reduce all rem sizes */
font-size: 13px;
}
/* You can reduce font sizes manually as well */
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1.0rem;
}
}
To make this work in Internet Explorer 7 and Internet Explorer 8 you will have to add a fallback with px units:
要在 Internet Explorer 7 和 Internet Explorer 8 中使用此功能，您必须使用 px 单位添加回退：
h1 {
font-size: 18px;
font-size: 1.125rem;
}
If you're developing with Less, you can create a mixin that will do the math for you.
如果您正在使用Less 进行开发，您可以创建一个 mixin 来为您进行数学计算。
Rem units support - http://caniuse.com/#feat=rem
Rem 单位支持 - http://caniuse.com/#feat=rem
回答by Tautvydas Bagd?ius
The "vw" solution has a problem when going to very small screens. You can set the base size and go up from there with calc():
“vw”解决方案在转到非常小的屏幕时会出现问题。您可以设置基本大小并使用 calc() 从那里开始：
font-size: calc(16px + 0.4vw);
回答by Sudheer
This is partly implemented in foundation 5.
这在基础 5 中部分实现。
In file _type.scss they have two sets of header variables:
在文件 _type.scss 中，它们有两组头变量：
// We use these to control header font sizes
// for medium screens and above
$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;
// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;
For medium up, they generate sizes based on the first set of variables:
对于中上，它们根据第一组变量生成大小：
@media #{$medium-up} {
h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }
h5 { font-size: $h5-font-size; }
h6 { font-size: $h6-font-size; }
}
And for default-i.e small screens, they use a second set of variables to generates CSS:
对于默认的小屏幕，他们使用第二组变量来生成 CSS：
h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }
You can use these variables and override in your custom scss file to set font sizes for respective screen sizes.
您可以在自定义 scss 文件中使用这些变量和覆盖来设置各个屏幕尺寸的字体大小。
回答by phlegx
A responsive font size can also be done with this JavaScript code called FlowType:
响应式字体大小也可以使用这个名为FlowType 的JavaScript 代码来完成：
FlowType - Responsive web typography at its finest: font-size based on element width.
FlowType - 最好的响应式网页排版：基于元素宽度的字体大小。
Or this JavaScript code called FitText:
或者这个名为FitText 的JavaScript 代码：
FitText - Makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
FitText - 使字体大小灵活。在您的响应式设计中使用此插件，根据比例调整标题大小。
