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?


/* 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