The current best practice is to use "em" measurements, where 1em is the size of the base font and zoom you've selected in your browser. Other measurements are scaled from there, so 2em is twice that size and .5em is half, etc.
In reality, the browser will use a variable number of pixels (and even device subpixels) to actually render the font or div -- but if you use all "em" measurements, all those sizes will have the same relationship to each other on the final device.
The 16px in the demo comes from the default base font size in the browser, which has 1em = 16px.
Only partly, and not the part that dtagames was speaking of.
There are three families of distance units.
One is absolute length units <https://www.w3.org/TR/css-values-4/#absolute-lengths>. px is the canonical one of these, but it may be anchored to physical measurements (typical in print) or the reference pixel (which in practice is generally approximated by some number of device pixels multiplied by a scaling factor from the operating system).
Then you get font-relative lengths <https://www.w3.org/TR/css-values-4/#font-relative-lengths>. The em dtagames speaks of is one of these. The root em, rem, is commonly used as a base, and is most commonly 16px, but it depends on a variety of factors like user preferences, the root font-size, the root font-family, and the root language. It’s very messy and even mildly context-dependent.
Most lengths should generally be font-relative for most perfect compatibility and user-preference-acceptance, but doing this perfectly is harder than it may sound.
In reality, the browser will use a variable number of pixels (and even device subpixels) to actually render the font or div -- but if you use all "em" measurements, all those sizes will have the same relationship to each other on the final device.
The 16px in the demo comes from the default base font size in the browser, which has 1em = 16px.