Responsive web-development tricks

To make your web-page fonts increase/decrease as the browser window dimensions change use viewport-based values instead of %, ems, pxs or pts.

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmax = 1vw or 1vh, whichever is larger
1vmin = 1vw or 1vh, whichever is smaller

Example:

h1 {

font-size: 4vw;

}
h2 {

font-size: 3vh;

}
h3 {

font-size: 2vmax;

}
p {

font-size: 2vmin;

}

Leave a Reply

Your email address will not be published. Required fields are marked *