#Viewport #CSS #responsive font-size and length units: xx-small to xx-large, em, rem, vw, vh

CSS units are divided into 2 categories: absolute and relative units. To make our website responsive, it is important to use relative units and media queries as we can set sizes relative to / scales based on viewport.

CSS Units

From MDN font-size doc

Absolute units: xx-small, x-small, small, medium, large, x-larger, xx-large
Relative units: smaller, larger
length values: px, em

Key take-away after reading MDN page is:
  1. medium font-size is the user's browser's default font size
  2. using <percentage> as font-size makes it relative to the parent element's font size.
  3. Using em as font size depends on the browser's default font size. 1em equals 1 time current font size. It is essentially a multiplier of current font size.
    em = desired element pixel value / parent element font-size in pixels
    Note that the font-size might be compounding as it keeps multiplying the current font size.
  4. px is an OS-independent and cross-browser way setting the font-size despite possible slight cross-browser discrepancy.
  5. rem is another version of em but it sets font size relative to the root html element and thus preventing size compounding
  6. em and percentage achieve the same result because they are relative to parent element's font size.

Font-size doc on MDN
Font-size doc on MDN


You refer to this MDN length page for more information:

Font relative units:

em, rem, ex, ch*, cap*, ic*, lh*, rlh*
em: inherited font size from parent element
rem: inherited font size from root element
cap: relative to capital letter height
ch: the width of  U+0030 code character,  "0"
ex: the height of lowercase x in fonts that have 'x'
ic: relative to CJK water ideograph, U+6C34, "水"

Viewport-percentage units:

vw, vh, vmin, vmax, vi*, vb*
vw: 1% of viewport width
vh: 1% of viewport height
vmin: min of vw and vh
vmax: max of vw and vh
vi: 1% size of the initial containing block in inline axis
vb: 1% size of the initial containing block in block axis

Absolute units:

cm, mm, in, px, pt, pc, q*
1q = 1/4mm
1in == 2.54cm == 96px == 72pt = 6 pc

Those marked with * are experimental.

You can use em and rem for font-size so that your content resizes proportionally throughout your webpage when the visitors change the browser font size.
rem is proportional to the root parent element which is usually html
em is proportional to its direct parent's font size

You can use vw and vh to let your webpage containers resize proportionally.
For example, you want your webpage width to be always 90% of the viewport. You can set the container width to vw: 90vw;

3) dpi: dots-per-inch
1in == 96dpi

CSS units and dots-per-inch
MDN CSS units and dots-per-inch

What is a viewport?

A viewport is the visible area of of a web page from user's point of view.
On mobile devices, it would be similar to your devices' screen if the web view is the same size as the screen size.
Whereas, on desktop, for example, a browser window is resizable and that determines the viewport size.

A meta tag to set viewport's properties for your web pages.

<meta name="viewport" content="width=device-width, initial-scale=1">
Width property sets the size of the viewport.
device-width is the width of the screen in CSS pixels at a scale of 100%.
initial-scale sets the zoom level when the page is first loaded.
maximum-scale is the maximum zoom in level allowed.
minimum-scale is the maximum zoom out level allowed.
user-scalable decides whether a page is scalable / zoom-able.

Refer to MDN view port doc for more detailed information.

Checking web page responsiveness on Google Chrome

Checking if web page is responsive on Google Chrome.
You can resize your browser to see your web page respond / scale / rearrange elements based on the browser's dimension.
Besides that, you can also turn on the developer tool / inspect the website. Click on the red-circled button below to toggle on devices. In the red-rectangle in the image, you can change the devices.

Thank you for reading!