Responsive / screen size wise font-size using CSS

,

Since there are lots of improvements is happening in CSS3 and still most of developer and designer are unaware of it.
So, Now let me present the new tag they introduce in CSS3 for Responsive font-size is : vw, vh, vmin, vmax
With this font size type, it will increase and decrease font size according to screen or browser size. This is very helpful as generally we use px but with px there is an issue when user opens it on large screen then they are not able to see proper font size so to fix this issue we increase that font in px and then the main issue occur for small screen devices because they see very big font on their tiny screen. to prevent this issue we add media query but my question is that how many media query you will write. so to save this extra effort we can use new font size type.
With the help of vw, vh, vmin, vmax we define font size and with this, we don’t have to write media queries for each screen.
Example:
vw:
Divs with color shade:

<div class="grid">
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
</div>
.grid::before,
.grid::after {
  clear: both;
  content: '';
  display: block;
}
.grid__item {
  box-sizing: border-box;
  float: left;
  height: 50vw;
  padding: 2em;
  width: 50vw;
}
.grid__item:nth-child(1) {
  background-color: #ff4433;
}
.grid__item:nth-child(2) {
  background-color: #ff5533;
}
.grid__item:nth-child(3) {
  background-color: #ff6633;
}
.grid__item:nth-child(4) {
  background-color: #ff7733;
}
.grid__item:nth-child(5) {
  background-color: #ff8833;
}
.grid__item:nth-child(6) {
  background-color: #ff9933;
}
.grid__item:nth-child(7) {
  background-color: #ffaa33;
}
.grid__item:nth-child(8) {
  background-color: #ffbb33;
}

Output: https://codepen.io/timseverien/pen/uhzgo
 
Screen wise font size:

<div class="container">
  <h1>My special headline</h1>
  <p>Re-size the viewport and see the headline magically resize!</p>
</div>
.container { text-align: center; }
h1 { font-size: 5vw; }

Output: https://codepen.io/timseverien/pen/rkhgo
In this, you can also use vmax instead of vw.
This is very helpful but the major drawback is that it is supported by only modern web browsers.

Related Posts