blocks|key|2616514|text|使用CSS+media说明符(这是zurb使用的)来响应样式：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2616515|@media+only+screen+and+(max-width:+767px)+{

+++h1+{
++++++font-size:+3em;
+++}

+++h2+{
++++++font-size:+2em;
+++}

}|code-block|syntax|javascript|2616516|entityMap^0|6|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Use CSS <code>media</code> specifiers (that's what they [zurb] use) for responsive styling:

<pre><code>@media only screen and (max-width: 767px) {

 h1 {
 font-size: 3em;
 }

 h2 {
 font-size: 2em;
 }

}
</code></pre>

blocks|key|507309|text|如果您不介意使用jQuery解决方案，可以尝试TextFill插件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|507310|jQuery+TextFill调整文本大小以适应容器，并使字体大小尽可能大。|blockquote|507311|https://github.com/jquery-textfill/jquery-textfill|offset|length|507312|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1E|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|F]]]]

If you don't mind to use a jQuery solution you can try TextFill plugin

<blockquote>
 jQuery TextFill resizes text to fit into a container and makes font size as big as possible.
</blockquote>

<a href="https://github.com/jquery-textfill/jquery-textfill" rel="noreferrer">https://github.com/jquery-textfill/jquery-textfill</a>

blocks|key|507355|text|您可以使用viewport值而不是ems、pxs或pts：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|507356|1+1vw+=视口宽度的1%25
1+1vh+=视口高度的1%25
1+1vmin+=1+1vw或1+1vh，以较小者为准
1+1vmax+=1+1vw或1+1vh，以较大者为准|blockquote|507357|h1+{
++font-size:+5.9vw;
}
h2+{
++font-size:+3.0vh;
}
p+{
++font-size:+2vmin;
}|code-block|syntax|javascript|507358|来自CSS-Tricks：http://css-tricks.com/viewport-sized-typography/|offset|length|507359|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/viewport-sized-typography/^0|0|0|0|D|1C|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|X|8|@]|9|@]|A|$H|I]]|$1|J|3|K|5|6|7|Y|8|@]|9|@$L|Z|M|10|1|11]]|A|$]]|$1|N|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

You can use the viewport value instead of ems, pxs, or pts:

<blockquote>
 1vw = 1% of viewport width
 
 1vh = 1% of viewport height
 
 1vmin = 1vw or 1vh, whichever is smaller
 
 1vmax = 1vw or 1vh, whichever is larger
</blockquote>

<pre><code>h1 {
 font-size: 5.9vw;
}
h2 {
 font-size: 3.0vh;
}
p {
 font-size: 2vmin;
}
</code></pre>

From CSS-Tricks: <a href="http://css-tricks.com/viewport-sized-typography/" rel="noreferrer">Viewport Sized Typography</a>

blocks|key|1827567|text|jQuery的"FitText“可能是最好的响应头解决方案。在GitHub：https://github.com/davatron5000/FitText.js上查看|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1827568|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/davatron5000/FitText.js^0|12|16|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

jQuery's "FitText" is probably the best responsive header solution. Check it out at GitHub:
<a href="https://github.com/davatron5000/FitText.js" rel="nofollow noreferrer">https://github.com/davatron5000/FitText.js</a>

blocks|key|2616624|text|还有另一种方法来响应字体大小-使用rem单位。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2616625|html+{
++++/*+Base+font+size+*/
++++font-size:+16px;
}

h1+{
++++font-size:+1.5rem;
}

h2+{
++++font-size:+1.2rem;
}|code-block|syntax|javascript|2616626|稍后在媒体查询中，可以通过更改基本字体大小来调整所有字体大小：|2616627|@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;
++++}
}|2616628|若要使此工作在7和8中完成，您必须在px单元中添加一个后备方案：|2616629|h1+{
++++font-size:+18px;
++++font-size:+1.125rem;
}|2616630|如果您正在使用较少进行开发，您可以创建一个用于计算的混合器。|offset|length|2616631|Rem单位支援-+http://caniuse.com/#feat=rem|2616632|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Less_%2528stylesheet_language%2529|1|http://caniuse.com/#feat=rem^0|0|0|0|0|0|0|7|2|0|0|9|S|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1A|8|@]|9|@$Q|1B|R|1C|1|1D]]|A|$]]|$1|S|3|T|5|6|7|1E|8|@]|9|@$Q|1F|R|1G|1|1H]]|A|$]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|13]]]]

There's another approach to responsive font sizes - using rem units.

<pre><code>html {
 /* Base font size */
 font-size: 16px;
}

h1 {
 font-size: 1.5rem;
}

h2 {
 font-size: 1.2rem;
}
</code></pre>

Later in media queries, you can adjust all fonts sizes by changing the base font size:

<pre><code>@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;
 }
}
</code></pre>

To make this work in Internet&nbsp;Explorer&nbsp;7 and Internet&nbsp;Explorer&nbsp;8 you will have to add a fallback with px units:

<pre><code>h1 {
 font-size: 18px;
 font-size: 1.125rem;
}
</code></pre>

If you're developing with <a href="https://en.wikipedia.org/wiki/Less_%28stylesheet_language%29" rel="noreferrer">Less</a>, you can create a mixin that will do the math for you.

Rem units support - <a href="http://caniuse.com/#feat=rem" rel="noreferrer">http://caniuse.com/#feat=rem</a>

blocks|key|507457|text|要做到这一点，有几种方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|507458|使用媒体查询，但它需要几个断点的字体大小：|offset|length|style|BOLD|507459|body
{
++++font-size:+22px;
}

h1
{
++++font-size:+44px;
}

@media+(min-width:+768)
{
++++body
++++{
++++++++font-size:+17px;
++++}
++++h1
++++{
++++++++font-size:+24px;
++++}
}|code-block|syntax|javascript|507460|在%25或em中使用维度。只要改变基本字体大小，一切都会改变。与前一个不同的是，您只需要每次更改主体字体，而不是h1，或者让基本字体大小成为设备的默认字体，其余的全部在em中。|CODE|507461|“Ems”(em)：“em”是一个可伸缩的单元。em等于当前字体大小，例如，如果文档的字体大小为12+pt，则1+em等于12+pt。环境管理系统本质上是可扩展的，因此2EM等于24%25pt，.5 em等于6%25pt，等等。|ordered-list-item|507462|百分比(%25)：百分比单位与“em”单位非常相似，但有几个基本差异。首先也是最重要的，当前字体大小等于100%25+(也就是12%25)。在使用百分比单位时，您的文本对于移动设备和可访问性来说仍然是完全可伸缩的。|507463|请参阅Kyleschaeffer.com/.|507464|CSS+3支持相对于视图端口的新维度。但这在Android上行不通：|507465|3.2vw+=视口宽度的3.2%25|507466|3.2vh+=视口高度的3.2%25|507467|3.2vmin+=较小的3.2vw或3.2vh|507468|3.2vmax+=较大的3.2vw或3.2vh
正文{字体大小:+3.2vw；}|507469|请参阅CSS-魔法师..。，也可以查看我能用..。|507470|entityMap|0|LINK|mutability|MUTABLE|url|http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/|1|http://css-tricks.com/viewport-sized-typography/|2|http://caniuse.com/viewport-units^0|0|2|4|0|0|1|4|2A|2|0|0|9|0|0|6|0|3|J|0|0|0|5|0|0|0|0|0|3|A|1|J|6|2|0^^$0|@$1|2|3|4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1L|8|@$D|1M|E|1N|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1O|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1P|8|@$D|1Q|E|1R|F|G]|$D|1S|E|1T|F|O]]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1U|8|@$D|1V|E|1W|F|G]]|9|@]|A|$]]|$1|S|3|T|5|R|7|1X|8|@$D|1Y|E|1Z|F|G]]|9|@]|A|$]]|$1|U|3|V|5|6|7|20|8|@]|9|@$D|21|E|22|1|23]]|A|$]]|$1|W|3|X|5|6|7|24|8|@$D|25|E|26|F|G]]|9|@]|A|$]]|$1|Y|3|Z|5|R|7|27|8|@]|9|@]|A|$]]|$1|10|3|11|5|R|7|28|8|@]|9|@]|A|$]]|$1|12|3|13|5|R|7|29|8|@]|9|@]|A|$]]|$1|14|3|15|5|R|7|2A|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|2B|8|@]|9|@$D|2C|E|2D|1|2E]|$D|2F|E|2G|1|2H]]|A|$]]|$1|18|3|-4|5|6|7|2I|8|@]|9|@]|A|$]]]|19|$1A|$5|1B|1C|1D|A|$1E|1F]]|1G|$5|1B|1C|1D|A|$1E|1H]]|1I|$5|1B|1C|1D|A|$1E|1J]]]]

There are several ways to achieve this.

Use a media query, but it requires font sizes for several breakpoints:

<pre><code>body
{
 font-size: 22px;
}

h1
{
 font-size: 44px;
}

@media (min-width: 768)
{
 body
 {
 font-size: 17px;
 }
 h1
 {
 font-size: 24px;
 }
}
</code></pre>

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 <code>em</code>:

<ol>
<li>“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&nbsp;pt, 1&nbsp;em is equal to 12&nbsp;pt. Ems are scalable in nature, so 2&nbsp;em would equal 24&nbsp;pt, .5&nbsp;em would equal 6&nbsp;pt, etc..</li>
<li>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&nbsp;pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.</li>
</ol>

See <a href="http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/" rel="nofollow noreferrer">kyleschaeffer.com/....</a>

CSS&nbsp;3 supports new dimensions that are relative to the view port. But this doesn't work on Android:

<ol>
<li>3.2vw = 3.2% of width of viewport</li>
<li>3.2vh = 3.2% of height of viewport</li>
<li>3.2vmin = Smaller of 3.2vw or 3.2vh</li>
<li>3.2vmax = Bigger of 3.2vw or 3.2vh

<pre><code>body
{
 font-size: 3.2vw;
}
</code></pre></li>
</ol>

See <a href="http://css-tricks.com/viewport-sized-typography/" rel="nofollow noreferrer">CSS-Tricks ...</a> and also look at <a href="http://caniuse.com/viewport-units" rel="nofollow noreferrer">Can I Use...</a>

blocks|key|1827750|text|与许多框架一样，一旦“脱离网格”并覆盖框架的默认CSS，事情就会开始向左和向右中断。框架本身就是僵化的。如果您要使用Zurb的默认H1样式以及它们的默认网格类，那么web页面应该在移动(即响应性)上正确显示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1827751|然而，它似乎您需要非常大的6.2em标题，这意味着文本将不得不收缩，以适应移动显示器在纵向模式。您最好的选择是使用响应性的文本jQuery插件，如FlowType和FitText。如果您想要重量轻的东西，那么您可以查看我的可伸缩文本jQuery插件：|offset|length|1827752|http://thdoan.github.io/scalable-text/|1827753|样本使用情况：|1827754|<script>
$(document).ready(function()+{
++$('.row+.twelve+h1').scaleText();
}
</script>|code-block|syntax|javascript|1827755|entityMap|0|LINK|mutability|MUTABLE|url|http://simplefocus.com/flowtype/|1|http://fittextjs.com/|2^0|0|21|8|0|2A|7|1|0|0|12|2|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]|$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|H|3|I|5|6|7|1B|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1C|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]|Y|$5|R|S|T|A|$U|G]]]]

As with many frameworks, once you "go off the grid" and override the framework's default CSS, things will start to break left and right. Frameworks are inherently rigid. If you were to use Zurb's default H1 style along with their default grid classes, then the web page should display properly on mobile (i.e., responsive).

However, it appears you want very large 6.2em headings, which means the text will have to shrink in order to fit inside a mobile display in portrait mode. Your best bet is to use a responsive text jQuery plugin such as <a href="http://simplefocus.com/flowtype/" rel="nofollow">FlowType</a> and <a href="http://fittextjs.com/" rel="nofollow">FitText</a>. If you want something light-weight, then you can check out my Scalable Text jQuery plugin:

<a href="http://thdoan.github.io/scalable-text/" rel="nofollow">http://thdoan.github.io/scalable-text/</a>

Sample usage:

<pre><code>&lt;script&gt;
$(document).ready(function() {
 $('.row .twelve h1').scaleText();
}
&lt;/script&gt;
</code></pre>

blocks|key|2616815|text|这部分是在基础5中实现的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2616816|在文件_type.scss中，它们有两组头变量：|2616817|//+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;|code-block|syntax|javascript|2616818|对于中等规模，它们根据第一组变量生成大小：|2616819|@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;+}
}|2616820|对于默认的小屏幕，它们使用第二组变量生成CSS：|2616821|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;+}|2616822|您可以在自定义scss文件中使用这些变量并重写这些变量，以设置相应屏幕大小的字体大小。|2616823|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

This is partly implemented in foundation 5.

In file _type.scss they have two sets of header variables:

<pre><code>// 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;
</code></pre>

For medium up, they generate sizes based on the first set of variables:

<pre><code>@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; }
}
</code></pre>

And for default-i.e small screens, they use a second set of variables to generates CSS:

<pre><code>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; }
</code></pre>

You can use these variables and override in your custom scss file to set font sizes for respective screen sizes.

blocks|key|2616832|text|这是对我有用的东西。我只在iPhone上测试过。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2616833|无论您是否有h1、h2或p标记，请将以下内容放在您的文本周围：|offset|length|style|CODE|2616834|<h1><font+size="5">The+Text+you+want+to+make+responsive</h1>|code-block|syntax|javascript|2616835|这将在桌面上呈现一个22+it的文本，并且它在iPhone上仍然是可读的。|2616836|<font+size="5">|2616837|entityMap^0|0|6|2|9|2|C|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]|$D|W|E|X|F|G]|$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|R|$]]

Here is something that worked for me. I only tested it on an iPhone. 

Whether you have <code>h1</code>, <code>h2</code>, or <code>p</code> tags put this around your text:

<pre><code>&lt;h1&gt;&lt;font size="5"&gt;The Text you want to make responsive&lt;/font&gt;&lt;/h1&gt;
</code></pre>

This renders a 22pt text on a desktop and it is still readable on the iPhone.

<pre><code>&lt;font size="5"&gt;&lt;/font&gt;
</code></pre>

blocks|key|1827857|text|恐怕在字体调整方面没有任何简单的解决方案。您可以使用媒体查询更改字体大小，但从技术上讲，它不会顺利地调整字体大小。例如，如果您使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1827858|@media+only+screen+and+(max-width:+320px){font-size:+3em;}|code-block|syntax|javascript|1827859|对于300个像素和200个像素宽度，您的font-size都是3em。但是，您需要200+to宽度的较低的font-size才能做出完美的响应。|offset|length|style|CODE|1827860|那么，真正的解决方案是什么呢？只有一个办法。您必须创建一个包含文本的PNG图像(具有透明的背景)。在此之后，您可以轻松地使您的图像响应(例如:宽度:35%25；高度:28+35)。通过这种方式，您的文本将完全响应所有设备。|1827861|entityMap^0|0|0|K|9|1H|9|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

I am afraid there isn't any easy solution with regards to font resizing. You can change the font size using a media query, but technically it will not resize smoothly. For an example, if you use:

<pre><code>@media only screen and (max-width: 320px){font-size: 3em;}
</code></pre>

your <code>font-size</code> will be 3em both for a 300 pixels and 200 pixels width. But you need lower <code>font-size</code> for 200px width to make perfect responsive.

So, what is the real solution? There is only one way. You have to create a PNG image (with a transparent background) containing your text. After that you can easily make your image responsive (for example: width:35%; height:28px). By this way your text will be fully responsive with all devices.

blocks|key|507652|text|如果在vw中定义字体大小(视口宽度)，则可以使字体大小响应。然而，并不是所有的浏览器都支持它。解决方案是使用JavaScript根据浏览器宽度更改基本字体大小，并在%25中设置所有字体大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|507653|下面是一篇描述如何做出响应的字体大小的文章：http://wpsalt.com/responsive-font-size-in-wordpress-theme/|offset|length|507654|entityMap|0|LINK|mutability|MUTABLE|url|http://wpsalt.com/responsive-font-size-in-wordpress-theme/^0|0|M|1M|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

You can make the font size responsive if defining it in vw (viewport width). However, not all browsers support it. The solution is to use JavaScript to change the base font size depending on the browser width and set all font sizes in %.

Here is an article describing how to make responsive fontsizes: <a href="http://wpsalt.com/responsive-font-size-in-wordpress-theme/" rel="nofollow noreferrer">http://wpsalt.com/responsive-font-size-in-wordpress-theme/</a>

blocks|key|2616923|text|我一直在玩弄克服这个问题的方法，并且相信我找到了一个解决办法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2616924|如果您可以为Internet+9(及更高版本)和所有其他支持CSS+calc()、rem单元和vmin单元的现代浏览器编写应用程序。您可以使用它来实现可伸缩的文本，而无需媒体查询：|2616925|body+{
++font-size:+calc(0.75em+%2B+1vmin);
}|code-block|syntax|javascript|2616926|在这里，它在行动：http://codepen.io/csuwldcat/pen/qOqVNO|offset|length|2616927|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/csuwldcat/pen/qOqVNO^0|0|0|0|9|12|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

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&nbsp;Explorer&nbsp;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:

<pre><code>body {
 font-size: calc(0.75em + 1vmin);
}
</code></pre>

Here it is in action: <a href="http://codepen.io/csuwldcat/pen/qOqVNO" rel="noreferrer">http://codepen.io/csuwldcat/pen/qOqVNO</a>

blocks|key|1827928|text|响应字体大小也可以使用这个名为JavaScript+FlowType的代码来完成。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1827929|http://simplefocus.com/flowtype/|unordered-list-item|1827930|https://github.com/simplefocus/FlowType.JS|1827931|FlowType+-最优秀的响应式网页排版:基于元素宽度的字体大小.|1827932|或者这个名为JavaScript+FitText的代码|1827933|http://fittextjs.com/|1827934|https://github.com/davatron5000/FitText.js|1827935|FitText+-使字体大小灵活。在您的响应设计中使用此插件对标题进行基于比例的调整。。|1827936|entityMap|0|LINK|mutability|MUTABLE|url|1|2|3^0|Z|6|0|0|W|0|W|0|0|0|16|0|16|1|0|0|Y|0|0|R|0|0|L|0|L|2|0|0|16|0|16|3|0|0|18|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|17|8|@$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|I|3|J|5|H|7|1D|8|@$9|1E|A|1F|B|C]]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|K|3|L|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|1P|8|@$9|1Q|A|1R|B|C]]|D|@$9|1S|A|1T|1|1U]]|E|$]]|$1|Q|3|R|5|H|7|1V|8|@$9|1W|A|1X|B|C]]|D|@$9|1Y|A|1Z|1|20]]|E|$]]|$1|S|3|T|5|6|7|21|8|@$9|22|A|23|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|24|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|G]]|11|$5|X|Y|Z|E|$10|J]]|12|$5|X|Y|Z|E|$10|P]]|13|$5|X|Y|Z|E|$10|R]]]]

A responsive font size can also be done with this JavaScript code called FlowType:

<ul>
<li><a href="http://simplefocus.com/flowtype/" rel="nofollow noreferrer">http://simplefocus.com/flowtype/</a></li>
<li><a href="https://github.com/simplefocus/FlowType.JS" rel="nofollow noreferrer">https://github.com/simplefocus/FlowType.JS</a></li>
</ul>

FlowType - Responsive web typography at its finest: font-size based on element width.

Or this JavaScript code called FitText:

<ul>
<li><a href="http://fittextjs.com/" rel="nofollow noreferrer">http://fittextjs.com/</a></li>
<li><a href="https://github.com/davatron5000/FitText.js" rel="nofollow noreferrer">https://github.com/davatron5000/FitText.js</a></li>
</ul>

FitText - Makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.

blocks|key|2617028|text|在实际的原始沙斯+(不是scss)中，您可以使用下面的混合器自动设置段落和所有标题的font-size。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2617029|我喜欢它，因为它更紧凑。打字更快。除此之外，它还提供了相同的功能。无论如何，如果您仍然想坚持使用新的语法-+scss，那么可以在这里将我的Sass内容转换为scss：[此处将SASS转换为SCSS+]。|2617030|下面我给你四个Sass混合器。您将不得不调整他们的设置，以满足您的需要。|2617031|=font-h1p-style-generator-manual()+//+You+don’t+need+to+use+this+one.+Those+are+only+styles+to+make+it+pretty.
=media-query-base-font-size-change-generator-manual()+//+This+mixin+sets+the+base+body+size+that+will+be+used+by+the+h1-h6+tags+to+recalculate+their+size+in+a+media+query.
=h1p-font-size-generator-auto($h1-fs:+3em,+$h1-step-down:+0.3,+$body-min-font-size:+1.2em,+$p-same-as-hx:+6)+//+Here+you+will+set+the+size+of+h1+and+size+jumps+between+h+tags
=config-and-run-font-generator()+//+This+one+only+calls+the+other+ones|code-block|syntax|javascript|2617032|在播放完设置后，只需调用一个混合器，即：%2Bconfig-and-run-font-generator().有关更多信息，请参见下面的代码和注释。|BOLD|2617033|我想您可以对媒体查询自动执行它，就像对标题标记一样，但是我们都使用不同的媒体查询，所以并不适合每个人。我使用的是移动第一设计方法，所以我会这样做。请随意复制和使用此代码。|2617034|将这些MIXINS复制并粘贴到您的文件中：|2617035|=font-h1p-style-generator-manual()
++body
++++font-family:+"Source+Sans+Pro",+"Helvetica+Neue",+Helvetica,+Arial,+sans-serif+//+google+fonts
++++font-size:+100%25
++++line-height:+1.3em
++%25headers
++++line-height:+1em
++++font-weight:+700
++p
++++line-height:+1.3em
++++font-weight:+300
++@for+$i+from+1+through+6
++++h#{$i}
++++++@extend+%25headers


=media-query-base-font-size-change-generator-manual()
++body
++++font-size:+1.2em
++@media+screen+and+(min-width:+680px)
++++body
++++++font-size:+1.4em
++@media+screen+and+(min-width:+1224px)
++++body
++++++font-size:+1.6em
++@media+screen+and+(min-width:+1400px)
++++body
++++++font-size:+1.8em

=h1p-font-size-generator-auto($h1-fs:+3em,+$h1-step-down:+0.3,+$body-min-font-size:+1.2em,+$p-same-as-hx:+6)
++$h1-fs:+$h1-fs+//+Set+first+header+element+to+this+size
++$h1-step-down:+$h1-step-down+//+Decrement+each+time+by+0.3
++$p-same-as-hx:+$p-same-as-hx+//+Set+p+font-sieze+same+as+h(6)
++$h1-fs:+$h1-fs+%2B+$h1-step-down+//+Looping+correction
++@for+$i+from+1+through+6
++++h#{$i}
++++++font-size:+$h1-fs+-+($h1-step-down+*+$i)
++++@if+$i+==+$p-same-as-hx
++++++p
++++++++font-size:+$h1-fs+-+($h1-step-down+*+$i)

//+RUN+ONLY+THIS+MIXIN.+IT+WILL+TRIGGER+THE+REST
=config-and-run-font-generator()
++%2Bfont-h1p-style-generator-manual()+//+Just+a+place+holder+for+our+font+style
++%2Bmedia-query-base-font-size-change-generator-manual()+//+Just+a+placeholder+for+our+media+query+font+size
++%2Bh1p-font-size-generator-auto($h1-fs:+2em,+$h1-step-down:+0.2,+$p-same-as-hx:+5)+//+Set+all+parameters+here|2617036|将所有MIXINS配置为您的需要--播放IT！:)，然后在实际SASS代码的顶部调用它：|2617037|%2Bconfig-and-run-font-generator()|2617038|这将产生这个输出。您可以自定义参数以生成不同的结果集。但是，由于我们都使用不同的媒体查询，所以有些混合必须手动编辑(样式和媒体)。|2617039|生成的CSS：|2617040|body+{
++font-family:+"Source+Sans+Pro",+"Helvetica+Neue",+Helvetica,+Arial,+sans-serif;
++font-size:+100%25;
++line-height:+1.3em;
++word-wrap:+break-word;+}

h1,+h2,+h3,+h4,+h5,+h6+{
++line-height:+1em;
++font-weight:+700;+}

p+{
++line-height:+1.3em;
++font-weight:+300;+}

body+{
++font-size:+1.2em;+}

@media+screen+and+(min-width:+680px)+{
++body+{
++++font-size:+1.4em;+}+}
@media+screen+and+(min-width:+1224px)+{
++body+{
++++font-size:+1.6em;+}+}
@media+screen+and+(min-width:+1400px)+{
++body+{
++++font-size:+1.8em;+}+}
h1+{
++font-size:+2em;+}

h2+{
++font-size:+1.8em;+}

h3+{
++font-size:+1.6em;+}

h4+{
++font-size:+1.4em;+}

h5+{
++font-size:+1.2em;+}

p+{
++font-size:+1.2em;+}

h6+{
++font-size:+1em;

}|2617041|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Sass_%2528stylesheet_language%2529|1|http://www.sasstoscss.com/^0|16|9|6|2|0|0|2B|H|1|0|0|0|K|W|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|F|3|G|5|6|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|H|3|I|5|6|7|1R|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1S|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1T|8|@$9|1U|A|1V|B|Q]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1W|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1X|8|@]|D|@]|E|$]]|$1|V|3|W|5|L|7|1Y|8|@]|D|@]|E|$M|N]]|$1|X|3|Y|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|Z|3|10|5|L|7|20|8|@]|D|@]|E|$M|N]]|$1|11|3|12|5|6|7|21|8|@]|D|@]|E|$]]|$1|13|3|14|5|6|7|22|8|@]|D|@]|E|$]]|$1|15|3|16|5|L|7|23|8|@]|D|@]|E|$M|N]]|$1|17|3|-4|5|6|7|24|8|@]|D|@]|E|$]]]|18|$19|$5|1A|1B|1C|E|$1D|1E]]|1F|$5|1A|1B|1C|E|$1D|1G]]]]

In actual original <a href="http://en.wikipedia.org/wiki/Sass_%28stylesheet_language%29" rel="nofollow noreferrer">Sass</a> (not scss) you could use the below mixins to automatically set the paragraph's and all headings' <code>font-size</code>.

I like it because it is much more compact. And quicker to type. Other than that, it provides the same functionality. Anyway, if you still want to stick to the new syntax - scss, then feel free to convert my Sass content to scss here:
<a href="http://www.sasstoscss.com/" rel="nofollow noreferrer"> [CONVERT SASS TO SCSS HERE]</a>

Below I give you four Sass mixins. You will have to tweak their settings to your needs.

<pre><code>=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones
</code></pre>

After you finish playing with settings just make a call on one mixin - which is: +config-and-run-font-generator(). See code below and comments for more information.

I guess you could do it automatically for a media query like it is done for header tags, but we all use different media queries, so it would not be appropriate for everyone. I use a mobile-first design approach, so this is how I would do that. Feel free to copy and use this code.

COPY AND PASTE THESE MIXINS TO YOUR FILE:

<pre><code>=font-h1p-style-generator-manual()
 body
 font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
 font-size: 100%
 line-height: 1.3em
 %headers
 line-height: 1em
 font-weight: 700
 p
 line-height: 1.3em
 font-weight: 300
 @for $i from 1 through 6
 h#{$i}
 @extend %headers


=media-query-base-font-size-change-generator-manual()
 body
 font-size: 1.2em
 @media screen and (min-width: 680px)
 body
 font-size: 1.4em
 @media screen and (min-width: 1224px)
 body
 font-size: 1.6em
 @media screen and (min-width: 1400px)
 body
 font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
 $h1-fs: $h1-fs // Set first header element to this size
 $h1-step-down: $h1-step-down // Decrement each time by 0.3
 $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
 $h1-fs: $h1-fs + $h1-step-down // Looping correction
 @for $i from 1 through 6
 h#{$i}
 font-size: $h1-fs - ($h1-step-down * $i)
 @if $i == $p-same-as-hx
 p
 font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
 +font-h1p-style-generator-manual() // Just a place holder for our font style
 +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
 +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here
</code></pre>

CONFIGURE ALL MIXINS TO YOUR NEEDS - PLAY WITH IT! :) AND THEN CALL IT ON THE TOP OF YOUR ACTUAL SASS CODE WITH:

<pre><code>+config-and-run-font-generator()
</code></pre>

This would generate this output. You can customize parameters to generate different sets of results. However, because we all use different media queries, some mixins you will have to edit manually (style and media).

GENERATED CSS:

<pre><code>body {
 font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size: 100%;
 line-height: 1.3em;
 word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
 line-height: 1em;
 font-weight: 700; }

p {
 line-height: 1.3em;
 font-weight: 300; }

body {
 font-size: 1.2em; }

@media screen and (min-width: 680px) {
 body {
 font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
 body {
 font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
 body {
 font-size: 1.8em; } }
h1 {
 font-size: 2em; }

h2 {
 font-size: 1.8em; }

h3 {
 font-size: 1.6em; }

h4 {
 font-size: 1.4em; }

h5 {
 font-size: 1.2em; }

p {
 font-size: 1.2em; }

h6 {
 font-size: 1em;

}
</code></pre>

blocks|key|507756|text|+h1+{+font-size:+2.25em;+}+
+h2+{+font-size:+1.875em;+}
+h3+{+font-size:+1.5em;+}
+h4+{+font-size:+1.125em;+}
+h5+{+font-size:+0.875em;+}
+h6+{+font-size:+0.75em;+}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|507757|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

blocks|key|2617081|text|在总结了许多结论之后，我得出了这样的结论：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2617082|@media+only+screen+and+(max-width:+730px)+{

++++h2+{
++++++++font-size:+4.3vw;
++++}
}|code-block|syntax|javascript|2617083|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

After many conclusions I ended up with this combination:

<pre><code>@media only screen and (max-width: 730px) {

 h2 {
 font-size: 4.3vw;
 }
}
</code></pre>

blocks|key|1828013|text|如果你使用的是构建工具，那就试试背包吧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1828014|否则，您可以使用CSS变量(自定义属性)轻松控制字体的最小和最大大小，如so+(演示)：|offset|length|1828015|*+{
++/*+Calculation+*/
++--diff:+calc(var(--max-size)+-+var(--min-size));
++--responsive:+calc((var(--min-size)+*+1px)+%2B+var(--diff)+*+((100vw+-+420px)+/+(1200+-+420)));+/*+Ranges+from+421px+to+1199px+*/
}

h1+{
++--max-size:+50;
++--min-size:+25;
++font-size:+var(--responsive);
}

h2+{
++--max-size:+40;
++--min-size:+20;
++font-size:+var(--responsive);
}|code-block|syntax|javascript|1828016|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/dannievinther/pen/GNExxb^0|0|14|2|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

If you are using a build tool then try Rucksack.

Otherwise, you can use CSS variables (custom properties) to easily control the minimum and maximum font sizes like so (<a href="http://codepen.io/dannievinther/pen/GNExxb" rel="nofollow noreferrer">demo</a>):

<pre><code>* {
 /* Calculation */
 --diff: calc(var(--max-size) - var(--min-size));
 --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
 --max-size: 50;
 --min-size: 25;
 font-size: var(--responsive);
}

h2 {
 --max-size: 40;
 --min-size: 20;
 font-size: var(--responsive);
}
</code></pre>

blocks|key|507842|text|当使用非常小的屏幕时，"vw“解决方案有一个问题。您可以设置基本大小，然后使用calc()从那里开始：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|507843|font-size:+calc(16px+%2B+0.4vw);|code-block|syntax|javascript|507844|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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():

<pre><code>font-size: calc(16px + 0.4vw);
</code></pre>

blocks|key|2617155|text|您可以通过以下方法实现这一目标：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2617156|使用对映体例如2.3雷姆|ordered-list-item|2617157|使用它们例如2.3em|2617158|使用%25例如2.3%25，此外，您可以使用:+vh，vw，vmax和vmin。|2617159|这些单位将自动调整大小取决于屏幕的宽度和高度。|2617160|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|O|8|@]|9|@]|A|$]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Q|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|L|$]]

There are the following ways by which you can achieve this:

<ol>
<li>Use rem for e.g. 2.3 rem</li>
<li>Use em for e.g. 2.3em</li>
<li>Use % for e.g. 2.3%
Moreover, you can use : 
vh, vw, vmax and vmin.</li>
</ol>

These units will autoresize depending upon the width and height of the screen.

blocks|key|1828098|text|我使用这些CSS类，它们使我的文本在任意大小的屏幕上流动：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1828099|.h1-fluid+{
++++font-size:+calc(1rem+%2B+3vw);
++++line-height:+calc(1.4rem+%2B+4.8vw);
}

.h2-fluid+{
++++font-size:+calc(1rem+%2B+2vw);
++++line-height:+calc(1.4rem+%2B+2.4vw);
}

.h3-fluid+{
++++font-size:+calc(1rem+%2B+1vw);
++++line-height:+calc(1.4rem+%2B+1.2vw);
}

.p-fluid+{
++++font-size:+calc(1rem+%2B+0.5vw);
++++line-height:+calc(1.4rem+%2B+0.6vw);
}|code-block|syntax|javascript|1828100|entityMap^0|0|T|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

I use these CSS classes, and they make my text fluid on any screen size:

<pre><code>.h1-fluid {
 font-size: calc(1rem + 3vw);
 line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
 font-size: calc(1rem + 2vw);
 line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
 font-size: calc(1rem + 1vw);
 line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
 font-size: calc(1rem + 0.5vw);
 line-height: calc(1.4rem + 0.6vw);
}
</code></pre>

blocks|key|2617197|text|我找到了这个解决方案，对我来说效果很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2617198|/*+Fluid+font+size:
minimum+font+size+at+min.+device+width+300px+=+14
maximum+font+size+at+max.+device+width+1600px+=+26
*/

body+{
++++font-size:+calc(14px+%2B+(26+-+14)+*+((100vw+-+300px)+/+(1600+-+300)));
}|code-block|syntax|javascript|2617199|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have found this solution, and it works very well for me:

<pre><code>/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
 font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
</code></pre>

blocks|key|507942|text|解决在桌面和移动/平板电脑上都好看的文本问题的一种方法是将文本大小固定到物理单位，比如物理厘米或英寸，这不依赖于屏幕PPI+(每英寸点数)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|507943|基于这个答案，下面是我在HTML文档末尾使用的用于响应字体大小的代码：|offset|length|507944|<div+id='testdiv'+style='height:+1in;+left:+-100%25;+position:+absolute;+top:+-100%25;+width:+1in;'></div>
<script+type='text/javascript'>
++var+devicePixelRatio+=+window.devicePixelRatio+%7C%7C+1;
++dpi_x+=+document.getElementById('testdiv').offsetWidth+*+devicePixelRatio;
++dpi_y+=+document.getElementById('testdiv').offsetHeight+*+devicePixelRatio;

++function+setFontSizeForClass(className,+fontSize)+{
++++++var+elms+=+document.getElementsByClassName(className);
++++++for(var+i=0;+i<elms.length;+i%2B%2B)+{
++++++++++elms[i].style.fontSize+=+String(fontSize+*+dpi_y+/+96)+%2B+"px";
++++++}
++}

++setFontSizeForClass('h1-font-size',+30);
++setFontSizeForClass('action-font-size',+20);
++setFontSizeForClass('guideline-font-size',+25);
++//+etc+for+your+different+classes
</script>|code-block|syntax|javascript|507945|在上面的代码中，不同类的项以物理单位分配字体大小，只要浏览器/OS为其屏幕的PPI配置正确。|507946|物理单位字体总是不太大，也不太小，只要与屏幕的距离是通常的(读书距离)。|507947|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/279749/detecting-the-system-dpi-ppi-from-js-css^0|0|2|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

One way to solve the problem of the text to look good on both desktop and mobile/tablet is in fixing the text size to physical units like physical centimeters or inches, which don't depend on the screen PPI (points per inch).

Based on <a href="https://stackoverflow.com/questions/279749/detecting-the-system-dpi-ppi-from-js-css">this answer</a>, below is the code I use at the end of the HTML document for a responsive font size:

<pre><code>&lt;div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'&gt;&lt;/div&gt;
&lt;script type='text/javascript'&gt;
 var devicePixelRatio = window.devicePixelRatio || 1;
 dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
 dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

 function setFontSizeForClass(className, fontSize) {
 var elms = document.getElementsByClassName(className);
 for(var i=0; i&lt;elms.length; i++) {
 elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
 }
 }

 setFontSizeForClass('h1-font-size', 30);
 setFontSizeForClass('action-font-size', 20);
 setFontSizeForClass('guideline-font-size', 25);
 // etc for your different classes
&lt;/script&gt;
</code></pre>

In the code above the items of a different class are assigned font sizes in physical units, as long as the browser/OS is configured correctly for the PPI of its screen.

A physical-unit font is always not too large and not too small, so long as the distance to the screen is usual (book-reading distance).

blocks|key|2617235|text|文本大小可以使用vw单元来设置，这意味着“视口宽度”。这样，文本大小将跟随浏览器窗口的大小：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2617236|文本|2617237|在我的个人项目中，我使用了大众和@meida。它工作得很完美。|2617238|.mText+{
++++font-size:+6vw;
}

@media+only+screen+and+(max-width:+1024px)+{
++++.mText+{
++++++++font-size:+10vw;
++++}
}


.sText+{
++++font-size:+4vw;
}

@media+only+screen+and+(max-width:+1024px)+{
++++.sText+{
++++++++font-size:+7vw;
++++}
}|code-block|syntax|javascript|2617239|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text^0|8|2|0|0|2|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

The text size can be set with a <code>vw</code> unit, which means the "viewport width". That way the text size will follow the size of the browser window:

<a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text</a>

For my personal project I used vw and @meida. It works perfectly.

<pre><code>.mText {
 font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
 .mText {
 font-size: 10vw;
 }
}


.sText {
 font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
 .sText {
 font-size: 7vw;
 }
}
</code></pre>

blocks|key|2617310|text|我刚刚想出了一个想法，您只需为每个元素定义一次字体大小，但它仍然受媒体查询的影响。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2617311|首先，我将变量“--文本缩放单元”设置为"1vh“或"1vw"，这取决于使用媒体查询的视口。|2617312|然后，使用calc()和我的乘法器号作为字体大小的变量：|2617313|​|2617314|/*+Define+a+variable+based+on+the+orientation.+*/
/*+The+value+can+be+customized+to+fit+your+needs.+*/
@media+(orientation:+landscape)+{
++:root{
++++--text-scale-unit:+1vh;
++}
}
@media+(orientation:+portrait)+{
++:root+{
++++--text-scale-unit:+1vw;
++}
}


/*+Use+a+variable+with+calc+and+multiplication.+*/
.large+{
++font-size:+calc(var(--text-scale-unit)+*+20);
}
.middle+{
++font-size:+calc(var(--text-scale-unit)+*+10);
}
.small+{
++font-size:+calc(var(--text-scale-unit)+*+5);
}
.extra-small+{
++font-size:+calc(var(--text-scale-unit)+*+2);
}|code-block|syntax|javascript|2617315|<span+class="middle">
++Responsive

<span+class="large">
++text

<span+class="small">
++with+one

<span+class="extra-small">
++font-size+tag.
|2617316|2617317|在我的示例中，我只使用了viewport的方向，但是这个原则应该适用于任何媒体查询。|2617318|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|X|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

I had just come up with an idea with which you only have to define the font size once per element, but it is still influenced by media queries.

First, I set the variable "--text-scale-unit" to "1vh" or "1vw", depending on the viewport using the media queries.

Then I use the variable using calc() and my multiplicator number for font-size:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
 :root{
 --text-scale-unit: 1vh;
 }
}
@media (orientation: portrait) {
 :root {
 --text-scale-unit: 1vw;
 }
}


/* Use a variable with calc and multiplication. */
.large {
 font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
 font-size: calc(var(--text-scale-unit) * 10);
}
.small {
 font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
 font-size: calc(var(--text-scale-unit) * 2);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="middle"&gt;
 Responsive
&lt;/span&gt;
&lt;span class="large"&gt;
 text
&lt;/span&gt;
&lt;span class="small"&gt;
 with one
&lt;/span&gt;
&lt;span class="extra-small"&gt;
 font-size tag.
&lt;/span&gt;</code></pre>
</div>
</div>


In my example I only used the orientation of the viewport, but the principle should be possible with any media queries.

blocks|key|1828206|text|使用这个公式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1828207|calc(42px+%2B+(60+-+42)+*+(100vw+-+768px)+/+(1440+-+768));|code-block|syntax|javascript|1828208|对于任何大于或小于1440和768的值，您可以给它一个静态值，或者应用相同的方法。|1828209|大众解决方案的缺点是，你不能设定一个比例，比方说，5vw的屏幕分辨率1440可能最终是60+it字体大小，你的想法字体大小，但当你把窗口宽度缩小到768，它可能是12+it，而不是最小的你想要的。|1828210|使用这种方法，您可以设置上边界和下边界，字体将在两者之间进行缩放。|1828211|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Use this equation:

<pre><code>calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
</code></pre>

For anything larger or smaller than 1440 and 768, you can either give it a static value, or apply the same approach.

The drawback with vw solution is that you cannot set a scale ratio, say a 5vw at screen resolution 1440 may end up being 60px font-size, your idea font size, but when you shrink the window width down to 768, it may ended up being 12px, not the minimal you want.

With this approach, you can set your upper boundary and lower boundary, and the font will scale itself in between.

blocks|key|1828220|text|我从CSS-戏法上看到了一篇很棒的文章。它工作得很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1828221|body+{
++++font-size:+calc([minimum+size]+%2B+([maximum+size]+-+[minimum+size])+*+((100vw+-
++++[minimum+viewport+width])+/+([maximum+viewport+width]+-+[minimum+viewport+width])));
}|code-block|syntax|javascript|1828222|例如：|1828223|body+{
++++font-size:+calc(14px+%2B+(26+-+14)+*+((100vw+-+300px)+/+(1600+-+300)));
}|1828224|我们可以将相同的等式应用于line-height属性，以使其随浏览器的不同而改变。|style|CODE|1828225|body+{
++++font-size:+calc(14px+%2B+(26+-+14)+*+((100vw+-+300px)+/+(1600+-+300)));
++++line-height:+calc(1.3em+%2B+(1.5+-+1.2)+*+((100vw+-+300px)/(1600+-+300)));
}|1828226|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/books/volume-i/scale-typography-screen-size/^0|2|6|0|0|0|0|0|D|B|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|17|8|@$A|18|B|19|O|P]]|9|@]|C|$]]|$1|Q|3|R|5|F|7|1A|8|@]|9|@]|C|$G|H]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

I saw a great article from <a href="https://css-tricks.com/books/volume-i/scale-typography-screen-size/" rel="noreferrer">CSS-Tricks</a>. It works just fine:

<pre><code>body {
 font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
 [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}
</code></pre>

For example:

<pre><code>body {
 font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}
</code></pre>

We can apply the same equation to the <code>line-height</code> property to make it change with the browser as well.

<pre><code>body {
 font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
 line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}
</code></pre>

blocks|key|1828244|text|我们可以使用css中的calc()|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1828245|p{
font-size:+calc(48px+%2B+(56+-+48)+*+((100vw+-+300px)+/+(1600+-+300)))+!important;
}|code-block|syntax|javascript|1828246|数学公式为calc(minsize+%2B+(maxsize+-+minsize)+*(100)/+(maxwidthviewoport+-+minviewportwidth)。|1828247|科德芬|offset|length|1828248|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/nicojl20/pen/OJVGazX^0|0|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

We can use calc() from css

<pre><code>p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}
</code></pre>

The mathematical formula is
calc(minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))

<a href="https://codepen.io/nicojl20/pen/OJVGazX" rel="nofollow noreferrer">Codepen</a>

blocks|key|508150|text|试着把这个包括在你的样式表中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|508151|html+{
++font-size:+min(max(16px,+4vw),+22px);
}|code-block|syntax|javascript|508152|更多信息请访问https://css-tricks.com/simplified-fluid-typography/|offset|length|508153|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/simplified-fluid-typography/^0|0|0|7|1F|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Try including this on your style sheet:
<pre class="lang-css prettyprint-override"><code>html {
 font-size: min(max(16px, 4vw), 22px);
}
</code></pre>
More info at <a href="https://css-tricks.com/simplified-fluid-typography/" rel="nofollow noreferrer">https://css-tricks.com/simplified-fluid-typography/</a>

blocks|key|508184|text|h1{
++font-size+:+clamp(2rem,+10vw,+5rem);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|508185|这里，clamp有3个参数。|unstyled|offset|length|style|CODE|508186|第一个是最小允许的字体大小.|unordered-list-item|508187|第三种是允许的最大字体大小。|508188|第二个参数是您希望始终拥有的字体大小。它的单位必须是相对的(vw，vh，ch)，而不是绝对的(即不px，mm，pt)。相对单元将使其改变其大小w.r.t变化的屏幕大小。|508189|考虑一个示例：考虑有一个大的字体图标，您想要动态地调整大小(响应图标)|blockquote|BOLD|508190|fa-random-icon{
+++font-size:+clamp(+15rem,+80vw,+80vh)+++
}|508191|这里，80+is是首选的字体大小。|508192|15+rem是最小字体大小(下限)。|508193|80vh是最大字体大小(上限)。|508194|即|508195|如果在一个特定的移动屏幕大小，如果80vw+<15+then，那么字体大小是15+then。|508196|如果屏幕太宽，那么如果80+if+>80+if，则字体大小为80+if。|508197|人们提出的上述方法，其结果总是有些不确定。就像我们只使用vw时，字体大小有时太大或太小(没有限制)。可以使用media查询，但必须将字体大小与至少3个媒体查询绑定在一起。|508198|entityMap^0|0|3|5|0|0|0|0|0|6|0|0|0|0|0|0|0|0|S|2|1I|5|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|1E|8|@$G|1F|H|1G|I|J]]|9|@]|A|$]]|$1|K|3|L|5|M|7|1H|8|@]|9|@]|A|$]]|$1|N|3|O|5|M|7|1I|8|@]|9|@]|A|$]]|$1|P|3|Q|5|M|7|1J|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1K|8|@$G|1L|H|1M|I|U]]|9|@]|A|$]]|$1|V|3|W|5|6|7|1N|8|@]|9|@]|A|$B|C]]|$1|X|3|Y|5|M|7|1O|8|@]|9|@]|A|$]]|$1|Z|3|10|5|M|7|1P|8|@]|9|@]|A|$]]|$1|11|3|12|5|M|7|1Q|8|@]|9|@]|A|$]]|$1|13|3|14|5|F|7|1R|8|@]|9|@]|A|$]]|$1|15|3|16|5|M|7|1S|8|@]|9|@]|A|$]]|$1|17|3|18|5|M|7|1T|8|@]|9|@]|A|$]]|$1|19|3|1A|5|T|7|1U|8|@$G|1V|H|1W|I|J]|$G|1X|H|1Y|I|J]]|9|@]|A|$]]|$1|1B|3|-4|5|F|7|1Z|8|@]|9|@]|A|$]]]|1C|$]]

<pre class="lang-css prettyprint-override"><code>h1{
 font-size : clamp(2rem, 10vw, 5rem);
}

</code></pre>
here <code>clamp</code> has 3 arguments.
<ul>
<li>first one is the minimum allowed font-size.
</li>
<li>third one is the maximum allowed font-size.
</li>
<li>second argument is font-size that you wish to always have. Its unit must be relative(vw, vh, ch) and not absolute(i.e not px, mm, pt). relative unit will make it change its size w.r.t the changing screen sizes.
</li>
</ul>
<blockquote>
Consider an example :
consider there is a large fontawesome icon that you want to resize dynamically (responsive icon)
</blockquote>
<pre class="lang-css prettyprint-override"><code>fa-random-icon{
 font-size: clamp( 15rem, 80vw, 80vh) 
}

</code></pre>
<ul>
<li>Here 80vw is the preferred font-size.</li>
<li>15 rem is the minimum font size (lower bound).</li>
<li>80vh is the max font size (upper bound).</li>
</ul>
i.e.
<ul>
<li>if in a particular mobile screen size if 80vw &lt; 15rem then font-size is 15rem.
</li>
<li>if screen is too wide then if 80vw &gt; 80vh then font-size is 80vh.
</li>
</ul>
<blockquote>
Those methods above suggested by people always have a bit uncertain result... like when we use <code>vw</code> only, the font size might sometimes be too big or too small (unbounded).
</blockquote>
<blockquote>
<code>media</code> queries can be used but you have to bound the font size with minimum 3 media-queries
</blockquote>

blocks|key|1828395|text|通过使用CSS，字体大小会根据屏幕大小而变化，您可以看到这个H1标记是响应的。(如果我错了，请纠正我)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1828396|​|1828397|@media+only+screen+and+(max-width:+1000px)+{
+++++h1+{
+++++++++font-size:5em;
++++}
}
+@media+only+screen+and+(max-width:+500px)+{
+++++h1+{
+++++++++font-size:+3em;
++++}
}
+@media+only+screen+and+(max-width:+300px)+{
+++++h1+{
+++++++++font-size:+2em;
++++}
}
+@media+only+screen+and+(max-width:+100px)+{
+++++h1+{
+++++++++font-size:+1em;
++++}
}|code-block|syntax|javascript|1828398|<h1>Resize+the+browser!</h1>|1828399|1828400|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

The font size changes depending on the screen size by using CSS You can see that this H1 tag is responsive. (correct me if I'm wrong)
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@media only screen and (max-width: 1000px) {
 h1 {
 font-size:5em;
 }
}
 @media only screen and (max-width: 500px) {
 h1 {
 font-size: 3em;
 }
}
 @media only screen and (max-width: 300px) {
 h1 {
 font-size: 2em;
 }
}
 @media only screen and (max-width: 100px) {
 h1 {
 font-size: 1em;
 }
}
 </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Resize the browser!&lt;/h1&gt;</code></pre>
</div>
</div>

blocks|key|2617611|text|很多答案，但我没有看到任何人提到min或max函数与媒体查询相结合。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2617612|CSS中有一个max()函数，所以上面的示例变成了一个一行：|2617613|font-size:+max(30vw,+30px);|code-block|syntax|javascript|2617614|或者用一分钟和最大的时间把它加倍：|2617615|font-size:+min(max(16px,+4vw),+22px);|2617616|与以下内容相同：|2617617|font-size:+clamp(16px,+4vw,+22px);|2617618|然后，不要忘记将其封装在媒体查询中，并以您喜欢的方式应用于您的h1、h2、h3、h4、h5、h6。|2617619|++++@media+(max-width:+600px)+{
++++++h1+{
+++++++++++font-size:+clamp(16px,+4vw,+22px);
+++++++++}
++++}|2617620|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

A lot of answers but I did not see anyone mentioning the min or max functions combined with media queries
There is a max() function in CSS, so our example above becomes a one-liner:
<pre><code>font-size: max(30vw, 30px);
</code></pre>
Or double it up with a min and max:
<pre><code>font-size: min(max(16px, 4vw), 22px);
</code></pre>
Which is identical to:
<pre><code>font-size: clamp(16px, 4vw, 22px);
</code></pre>
Then don't forget to wrap this in a media query and apply to your h1,h2,h3,h4,h5,h6 how you prefer.
<pre><code> @media (max-width: 600px) {
 h1 {
 font-size: clamp(16px, 4vw, 22px);
 }
 }
</code></pre>

blocks|key|508354|text|设置您的基本字体大小，并夹紧它的夹子功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|508355|对字体大小使用钳子()，如下面的示例所示，允许您设置一个字体大小随视口大小增长但不低于最小字体大小的字体大小。|508356|钳位法MDN文档|offset|length|508357|下面是一个例子。|508358|h1+{
++font-size:+clamp(1.5em,+4vw,+2.5em);
}

h2+{
font-size:+clamp(1.2em,+4vw,+2.4em);
}

p+{
font-size:+clamp(0.6em,+4vw,+1.2em);
}|code-block|syntax|javascript|508359|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/clamp^0|0|0|0|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$F|Z|G|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Set your base font size and clamp it with the clamp function.
using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clamp" rel="nofollow noreferrer">Clamp Method MDN Docs</a>
Here is an example.
<pre><code>h1 {
 font-size: clamp(1.5em, 4vw, 2.5em);
}

h2 {
font-size: clamp(1.2em, 4vw, 2.4em);
}

p {
font-size: clamp(0.6em, 4vw, 1.2em);
}
</code></pre>

I've created a site using the Zurb Foundation 3 grid. Each page has a large <code>h1</code>:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
 font-size: 100%
}

/* Headers */

h1 {
 font-size: 6.2em;
 font-weight: 500;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
 &lt;div class="twelve columns text-center"&gt;
 &lt;h1&gt; LARGE HEADER TAGLINE &lt;/h1&gt;
 &lt;/div&gt;
 &lt;!-- End Tagline --&gt;
&lt;/div&gt;
&lt;!-- End Row --&gt;</code></pre>
</div>
</div>


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 <a href="http://foundation.zurb.com/sites/docs/v/3.2.5/typography.php" rel="noreferrer">example page</a>, the headers adapt to the browser as it is compressed and expanded. 

Am I missing something really obvious? How do I achieve this?

Responsive font size in CSS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用ZURBFoundation3网格创建了一个站点。每个页面都有一个大的h1。​body { font-size: 100%}/* Headers */h1 { font-size: 6.2em; font-weight: 500;}<div class="row"> <div class="twelve ...

问CSS响应字体大小
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS响应字体大小EN