Completely responsive CSS values, more than just media queries

Promise Tochi on October 19, 2017

The goal of this article is to achieve a font-size value that fluidly transitions from 14px at a browser window width of 769px, to 24px for a 204... [Read Full]
markdown guide
 

Awesome article!

Doesn't your final example require calc() to be included or am I missing something?

example:

/* Laptop and Desktops screens */
@media (min-width: 769px) {
  html {
    font-size: calc(14px + 10 * ((100vw - 769px) / 2048px));
  }
}
 

Wow, thanks for pointing that out, Stephen 😅

 
 

Or you can use D3-scale :)

var x = d3.scaleLinear()
          .domain([14, 24])           // font size
          .range([769, 2048]);     // screen size

Haven't tried it, though…

 

oh. That looks interesting for Javascript values

 

You can use it with a framework that injects CSS, styled-components or any other…

 
 
 

A very nice article, thanks for that. I will try it on my landing page project. Will help me alot with writing it completely from scratch while ensuring maximum responisveness. Thanks !

 
 
 
code of conduct - report abuse