Viewports are pretty easy on desktop: they're the browser window. Thus, an element with width: 10% will span 10% of the browser window, while width: 100px just means a width of 100px.

On mobile, things are quite different. There are two viewports and three kinds of pixels, and they interact in all kinds of weird ways—ways that depend on the browser. More info at: https://fronteers.nl/congres/2012/sessions/a-pixel-is-not-a-pixel-peter-paul-koch