Responsive Font Size

2018-07-01 08:55:02

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1.

CSS

body {font-size:100%}
/* Headers */
h1 { font-size:6.2em;font-weight:500; }

HTML

<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 accomodate 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.

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

The font-size won't respond like this when resizing the browser window. 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.

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 320px width for wherever your design starts breaking:

@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 . The official W3C document for this states:

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:

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.

And they are used in exactly the same way as any other CSS value:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Compatibility is relatively good as can be seen here. However, some versions of IE and Edge don't support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.

You can use viewport value instead of ems, pxs or 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

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

from Css-tricks: http://css-tricks.com/viewport-sized-typography/

使用CSS media说明符（这是他们[zurb]使用的）响应式样式：

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

链接地址: http://www.djcxy.com/p/87490.html

上一篇: 浏览器中CSS渲染的大小值？