css - CSS中的自适应字体大小(Responsive font size in CSS)

Question

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?

(我该如何实现？)

  ask by user2213682 translate from so

Answer 1

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技巧： 视口大小的版式)