This is the 25th day of my participation in the August Challenge

Creation is not easy, click a “like” and then watch!

Follow the column to get you into the depths of the CSS world

preface

What’s the most common thing on a web page? A normal person’s first reaction would be words. If you told me that it was a picture, I could only say:

One of the most difficult problems in responsive web design is the size of text. Facing all kinds of strange devices, how to solve the problem of text configuration is a very important problem.

In the last article, WE introduced 8 Responsive units. Most of the solutions of Responsive fonts rely on these units to solve the problem.

Original: @ media

Here are two simple examples of changing the font size on different devices by using media queries. What’s the downside of this approach? Because the PX is fixed, if you set the width range of the device to be large, it will cause the current PX to look too large or too small on another device. Another problem is; You can’t use all the text at this size, and you need to do separate processing for the other text, which is cumbersome. Lots of code.

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    html{
      font-size:**px; }}@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
    **px
}

Copy the code

Enhanced: @media + REM

Rem is a multiple of the font size of the HTML root element.

Depending on the rem feature, it is better to solve the problem of different text sizes. However, how to choose the device width range is still more complicated.

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
  html{
    font-size:**px;
  }

p{
  font-size:1rem;
}
Copy the code

:root + vm + vh

For me, my favorite is to use :root, but you can also choose HTML and use :root to calculate the font size based on VM and VH for different devices.

:root { font-size: calc(1vw + 1vh + .5vmin); } body {font-size: 1rem/1.6}Copy the code

What is the final size of this formula? A quick reminder:

1vw = 1% of the viewport width

1vh = 1% of viewport height

1vmin = 1VW or 1vh, whichever is less

1vmax = 1VW or 1vh, whichever is greater

If we apply this to the viewport size of the iPhone 7, 375×667, we calculate the value :root:

Font: calc(3.75px + 6.67px + 1.875px); /* 1vw + 1vh + .5min */ }Copy the code

conclusion

You can use any of these methods, but I’ll stick with root. In addition to these methods, there are other methods, such as using JS on the page, according to the width and height of the viewport, set the text size on the root element, this is also a good solution, you can try your own.