Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR CSS

CSS fluid type sizing based on viewport

/* NOTE: The [brackets] are not included in the syntax. 
BUT, the 'px' denomination needs to be.
If 'px' is not noted, it's just the numerical value. */

.whateverClassBeingTargeted {
  font-size: calc([minimum size px] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport widthpx]) / ([maximum viewport width] - [minimum viewport width])));
}

/* THERE IS ALSO 'CLAMP' BUT IT HASN'T BEEN CONSISTENT AMONG ALL BROWSERS */ 
Source by css-tricks.com #
 
PREVIOUS NEXT
Tagged: #CSS #fluid #type #sizing #based #viewport
ADD COMMENT
Topic
Name
5+6 =