CSS中的自适应字体大小

本文翻译自：Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. 我已经使用Zurb Foundation 3网格创建了一个站点。 Each page has a large h1 : 每个页面都有一个很大的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 3 Typography example page , the headers adapt to the browser as it is compressed and expanded. 我注意到在Zurb Foundation 3 Typography 示例页面上，标题在压缩和扩展时适应浏览器。

Am I missing something really obvious? 我是否真的缺少明显的东西？ How do I achieve this? 我该如何实现？

#1楼

参考：https://stackoom.com/question/13f5A/CSS中的自适应字体大小

#2楼

The font-size won't respond like this when resizing the browser window. 调整浏览器窗口大小时， font-size不会像这样响应。 Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser. 相反，它们会响应浏览器的缩放/类型大小设置，例如，当您在浏览器中同时按下键盘上的Ctrl和+时。

Media Queries 媒体查询

You would have to look at using media queries to 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 lengths such as vw , vh , vmin and vmax . 您还可以使用视口百分比长度，例如vw ， vh ， vmin和vmax 。 The official W3C document for this states: 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. vw单位-等于初始包含块的宽度的1％。

vh unit - Equal to 1% of the height of the initial containing block. vh单位-等于初始包含块的高度的1％。

vmin unit - Equal to the smaller of vw or vh. vmin单位-等于vw或vh中的较小者。

vmax unit - Equal to the larger of vw or vh. vmax单位-等于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. 但是，某些版本的Internet Explorer和Edge不支持vmax。 Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8. 此外，iOS 6和7的vh单元存在问题，已在iOS 8中修复。

#3楼

Use CSS media specifiers (that's what they [zurb] use) for responsive styling: 使用CSS media说明符（即[zurb]所使用的）进行响应式样式：

@media only screen and (max-width: 767px) {h1 {font-size: 3em;}h2 {font-size: 2em;}}

#4楼

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调整文本大小以适合容器，并使字体大小尽可能大。

https://github.com/jquery-textfill/jquery-textfill https://github.com/jquery-textfill/jquery-textfill

#5楼

You can use the viewport value instead of ems, pxs, or pts: 您可以使用视口值代替ems，pxs或pts：

1vw = 1% of viewport width 1vw =视口宽度的1％

1vh = 1% of viewport height 1vh =视口高度的1％

1vmin = 1vw or 1vh, whichever is smaller 1vmin = 1vw或1vh，以较小者为准

1vmax = 1vw or 1vh, whichever is larger 1vmax = 1vw或1vh，以较大者为准

h1 {font-size: 5.9vw;
}
h2 {font-size: 3.0vh;
}
p {font-size: 2vmin;
}

From CSS-Tricks: Viewport Sized Typography 从CSS技巧： 视口大小的版式

#6楼

jQuery's "FitText" is probably the best responsive header solution. jQuery的“ FitText”可能是最佳的响应头解决方案。 Check it out at GitHub: https://github.com/davatron5000/FitText.js 在GitHub上检查一下： https : //github.com/davatron5000/FitText.js

CSS中的自适应字体大小相关推荐

php的样式怎么设置字体大小,css中如何改变字体大小
在css中,可以使用font-size属性来改变字体大小,该属性可以设置字体大小,语法格式为"font-size:值;".实际上font-size属性设置的是字体中字符框的高度,实 ...
android auto 字体大小,Android中给TextView字体大小用dp还是sp？dp和sp有什么区别？
dp,sp都会根据屏幕ppi显示大小不同. ppi的运算方式是: PPI = (开根号(长度像素数² + 宽度像素数²)) / 屏幕对角线英寸数 dp:Density-independent pixe ...
手机端自适应字体大小和元素宽度自适应
第一种,媒体查询: @media (min-width:0px){html{font-size:12px;} } @media (min-width: 320px){html{font-size:12 ...
html语言让文字变大,html中div设置字体大小
html中div设置字体大小有两种方法,下面由学习啦小编为大家整理了html中的div设置字体大小的相关知识,希望对大家有帮助! html中div设置字体大小设置对象DIV字体大小或span字体大小 ...
native字体尺寸自适应 react_ios-React Native自适应字体大小
ios-React Native自适应字体大小我想问一下如何处理本机句柄或做响应字体. 例如,在iPhone 4s中,我的fontSize:14,而在iPhone 6中,我的fontSize:18. ...
5 控件固定大小_【聊技术】在Android中实现自适应文本大小显示
本周的聊技术话题和大家说说如何在Android中实现自适应文本大小显示. 想象一下,在布局中,通常显示文本的区域大小是固定的,但是文本长度并不总是固定的.比如列表中的文章标题.界面下方的按钮文本等等. ...
Eclipse中如何更改字体大小？
Eclipse中如何更改字体大小? 2012-02-06 21:19风吹过云散了- | 浏览 40980 次 wiondow--preferences--general--appearance--co ...
VUE中动态改变字体大小
VUE中动态改变字体大小父组件将自己的数据传递送给子组件展示,子组件监听click操作,emit发送出去,父组件监听通过emit发送的信息,改变控制字体大小的postFontSize,通过style ...
【聊技术】在Android中实现自适应文本大小显示
本周的聊技术话题和大家说说如何在Android中实现自适应文本大小显示. 想象一下,在布局中,通常显示文本的区域大小是固定的,但是文本长度并不总是固定的.比如列表中的文章标题.界面下方的按钮文本等等. ...

CSS中的自适应字体大小

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

CSS中的自适应字体大小相关推荐

最新文章

热门文章