How to implement the Font-size response style

This paper is transferred from Nuggets net

So many articles talk about how the responsive Web site is laid out, how it is implemented using CSS, and how blah blah. However, we have forgotten a very important point--------responsive control of font size.

Many of today's web sites, from a layout standpoint, are responsive (and, of course, perhaps referred to as reactive). However, from a font, it is not necessarily responsive. Although, each site may be used in some way (such as frequent use @media ) to let its own site display different size of the font under different screen size, but this is not called the response, this is only an adaptive approach.

So, how can we font-size really respond to our realization?

The main things we need to do are the following two points:

1, to develop a maximum and minimum screen width value, we should be font-size in this screen range of smooth and uniform changes, it is impossible to keep the font size constantly changing. Imagine that you have been shrinking or the way the browser, the font has been smaller or larger scene.

2, the largest and smallest font-size , the screen size is smaller than the minimum screen width value, the application of the smallest font-size , conversely, the largest application font-size ;

OK, the plan is set up, so, how should it be implemented? What technologies do we need to use?

In fact, there is not much technology to use, but we need to turn our brains around.

• @media: The media query provided by CSS level 3, as long as the response is done, or any adaptation of the screen function has definitely used this property. So, this property is explained in more detail and can be viewed @media | MDN
• vw: Viewport unit, 1VW equivalent to 1% of the screen width. There's more than enough explanation here. length | Css
• calc: This is a very powerful property provided by CSS that can be used to dynamically calculate CSS values. Our function is mainly implemented by this function. View More in Calc | MDN

OK, the required technology is also complete. Well, let's do it one step at a time.

Defining variables

As stated in the above plan, we need to define four values, which are the minimum screen width, the maximum screen width, the minimum font, and the maximum font.

      $min-font-size:14px;　　$max-font-size:18px;　　$min-screen:600px; $max-screen:1200px;

However, using px to define the font size is not very elegant and we can use it rem to define our fonts. Then, you need to set the font size for the root element of the Web site first.

: root {   font-size:10px; }

Then, update our variables.

   $min-font-size:1.4rem;　　$max-font-size:1.8rem;　　$min-screen:600px; $max-screen:1200px;

　We put our variable definition and the root element of the font-size On top of the file. In this case, we will not write those related to reset and other styles. 

Add test Content

A good head, and then proceed to the next step, very simple, write our HTML, here do not do too much to repeat

Use@mediaTo limit font size boundary values
As mentioned above, when our screen width is less than 600px, the font size is 1.4rem, the screen width is greater than 1200px, the font size is 1.8rem. This feature is very simple to implement, just need to apply a small piece of media query on the line.
@media (min-width: $max-screen) {    article {        font-size: $max-font-size;    }} @media (max-width: $min-screen) {    article {        font-size: $min-font-size;    }}
OK, just for a piece of code, we can limit the boundary value of the font size. When the screen width is less than or greater than the corresponding screen width value, our font size will remain at a constant value.
So, the boundary limit is done, and the next step is to implement the real response. What do you say? We're going to make font-size a 600px ~ 1200px smooth change in the width range of our screen. Of course, this is not enough, not to say, just to font-size set a percentage or any other relative units, and then let this font can zoom in and out of the screen while also can zoom out. What we want to do is to achieve the response through precise size control.
Usecalcfunction to implement font-size response
Take a closer look at the code for the limit of the font size boundary value above, there are already two @media , in this part, we certainly have to add one, is it @media a little superfluous? So, we can be a little leaner.
Article {    font-size: $min-font-size;} @media (min-width: $min-screen) and (max-width: $max-screen) {    //...} @media (min-width: $max-screen) {    article {        font-size: $max-font-size;    }}
Only two of them @media are enough. For those that are not within the scope of the media query, you just need to set a default value. However, it is important to note that this default value must be written in front of the two media query rules. Otherwise, due to the cascading nature of CSS, the later declared style overrides the first declared style, which causes the media query rule to not work.
So, to achieve a precise and smooth change in the width of this screen, it is necessary to use a bit of mathematical calculation.
1, font-size the scope of change is 1.8rem - 1.4rem = 0.4rem ;
2, the width of the screen change range is 1200px - 600px = 600px ;
3, the smallest font-size is 1.4rem . Then, as long as the screen width is greater than 600px, this value will certainly increase, as long as the screen width of 1200px, this value also reached 1.8rem, and then no longer change;
can see:
For example, we now have three kinds of screen widths, namely 600px,1000px,1200px. So, looking closely at the reference line on the left, we remove the smallest screen width, which is equivalent to the remaining two values, one is a and the other is B.
Since 1200px is the maximum size of the screen width we set, that is, B has the largest range of changes, that is, the length of a. In layman's words, A and B can be seen as progress bars, A is 100% in length, and B is a constant increase or decrease in length. So, there is a proportional value, when B is 0, the ratio is 0, and when B is 100%, the ratio is 1.
So, according to the idea, change to font-size the corresponding change: The range is 0.4rem , this is the denominator, then, how to calculate the molecule? How do we know how much font has been added?

 
 

  
  
 
   
There must be no reduction here. We are 600px ~ 1200px changing between, the smallest font for 1.4rem , no matter how to calculate, the font size will no longer be reduced.
 
  
 
 
So there's a small conversion here. Think about it, we change not only the size of the font, but also the width of the screen is changing. So, as the picture explains, you can use the screen width calculation to get a corresponding scale, and then multiply font-size the range of changes to 0.4rem get our added font size. Then, by adding the range of changes to the smallest font-size base, you can get the exact width of the screen font-size .
So, the use calc can be written like this:
@media (min-width: $min-screen) and (max-width: $max-screen) {    article {        Font-size:calc ($min-font-size + (1.8-1 .4) * ((100vw-$min-screen)/(1200-600));}    }
 
 

  
  
 
   
Note that the calc function calculates the division, the / right can only be a number, not the unit. *at least one parameter is required to be a number.
 
  
 
 
I'll explain this, and I can see that there's an expression in it, 100vw - 600px what does that mean?
Convert to Text: The width of the viewable area of the browser minus the minimum width.
In fact, it is very simple to understand, for example: assuming that the screen width is now 1000px, then, the 100vw - 600px result is 400px , then, divided by 600, the last thing to get is 2 / 3 . Then, this value is multiplied 0.4rem , so that you can calculate the added font size value, and then add 1.4rem , you can get the final one font-size .
So, in that case, we're going to font-size implement the response. No more changes are made through media queries of various screen sizes.
Thankfully, this rule line-height applies equally.
The following is the complete SCSS code:
$min-font-size:1.4rem; $max-font-size:1.8rem; $min-screen:600px; $max-screen:1200px;:root {    font-size:10px;} Article {    font-size: $min-font-size;} @media (min-width: $min-screen) and (max-width: $max-screen) {    article {        Font-size:calc ($min-font-size + (2-1.4 ) * ((100vw-$min-screen)/(1200-800));}    } @media (min-width: $max-screen) {    article {        font-size: $max-font-size;    }}
How to implement the Font-size response style