Fluid Responsive CSS Font Size

Introduction

Making Responsive Websites is not easy. Many examples are just made for just one part of the problem and seldom on the entire problem. Let me try to help, by creating this page, which is, of course, at-the-moment under construction.

Summary

Embracing fluid typography might be easier than you think. It has wide browser support, is simple to implement and can be achieved without losing control over many important aspects of design.

Source: Smashing Magazine, 2016, Fluid Typography

Viewport

Text	Code Javascript + jQuery
Viewport units making fluid typography on the web possible. Viewport units refer to a percentage of the browser’s viewport dimensions. For example, 1 viewport width (vw) is equal to 1% of the viewport’s width. The units differ from percentages because they are always relative to the viewport, whereas a percentage is relative to the element’s parent container.	## What is viewport's height and width using JS $ console.log( "Viewport vh x vh : " + window.innerHeight + "px x " + window.innerWidth + "px" ) ## Result in (not your real viewport, just an example): Viewport vh x vh : 836px x 1638px

Viewport unit	Description
vw	Viewport width, equivalent to JS window.innerWidth
vh	Viewport height, equivalent to JS window.innerHeight
vmin	Smaller value of the viewport’s width and height
vmax	Larger value of the viewport’s width and height

|} |}