How to Properly Use CSS-Values Viewport-Relative-Lengths

How can I gracefully degrade CSS viewport units?

Native usage

You'll at least want to provide a fallback:

h1 {
  font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
  font-size: 5.4vw;  
}

Also tells about mimicing the functionality with FitText.js.

For more information, read Chris Coyier's "Viewport Sized Typography" http://css-tricks.com/viewport-sized-typography/

CSS: Are view height (vh) and view width (vw) units widely supported?

The statistic is clearly and it is a fair assessment, in my point of view.

I think the decision has to be made by you. If you want to future-proof your website using the latest greatest technology, but are aware that there are currently some downfalls, then great, go for it.

If you are not prepared to invest a little more into your online presence, then stick to the old way, which is in no means wrong.

EDIT: When I want to create a responsive design I start developing for Mobile Devices first and then create the Desktop Version, to ensure that my viewports all work correctly, since the Mobile support is lacking at some points(especially vmax). BUT about this you could ask 50 guys and the chances that they all will say something else are pretty good.

Is there a way to up-size the font with CSS to fit the screen?

I think this is what you're looking for: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

You can you vw (viewport width) or wh (viewport height) where 1 v == 1% of the initial containing block

Example:

 p{
     font-size: 4vw;
 }

CSS: unit relative to the container, not viewport?

Yes they exist but you still need to wait for too long before using them.

From the Specification

Container query length units specify a length relative to the dimensions of a query container. Style sheets that use container query length units can more easily move components from one query container to another.

Find the relevant github discussion here: https://github.com/w3c/csswg-drafts/issues/5888

How to set css position 'top' relative to document height instead of viewport height?

If you give the body a position: relative and the div a position: absolute, you can set the top property as a percentage, where top: 100% will position it at the bottom of the page:

body {  

  height: 180vh;

  background: lightblue;

  position: relative;

}

div{

   height: 30px;

   width: 140px;

   border: solid 2px gray;

   background: white;

   position: absolute;

   top: 100%;

}

<div></div>