When it comes to these two they're nearly identical. Each approach is decided by the developer in terms of the way the content has been designed.
When a layout is created by the web designer they may choose the option of designing a "Mobile first" layout which has been designed on the idea of a mobile ready device. The same can be said for "Desktop first" in which the process is reversed.
When the view port has been reduced in size things tend to deduct down to regulate where the content is placed, this is referred to as the flow.
If the header of a site is 100% width then it will reach out from the very left to very right of your view port. If you wanted to center the content at a specific size then giving it a min value of let's say, 960px will allow it to center itself and be positioned in a less clogged fashion.
If a news website with 3 columns was display on desktop in a row horizontally then at specific "break points" we can allow the columns to drop underneath one another allowing for a better viewing experience.
When dealing in the world of mobile design and in an age with so many digital devices, pixels can tend to be less accurate. This is where percentages come into play and allow for a smooth transition between view ports.
When elements in a page have been nested, they're placed individually on their own rather then treated as whole.
Vectorized images allow for an upscale and downscale at 0% quality loss. A regular image may be distorted and pixelated depending on how far from the original size the device is displaying.
Web fonts are fonts which have been placed upon a web server and allow the viewer to have a custom experience, though, depending on the font the load times may vary. A system font is one in which is distributed across operating systems and are safe loaded from your computer.