Skip to content

DEV Community

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 post

Stephen Chiang • Mar 11 '18 • Edited

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));
  }
}

Promise Tochi • Apr 17 '18

Wow, thanks for pointing that out, Stephen 😅

Hubert Dworczyński • Oct 20 '17

Cool! Any chance for a codepen demo?

Alex Escalante • Dec 3 '17 • Edited

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…

Promise Tochi • Dec 6 '17

oh. That looks interesting for Javascript values

Alex Escalante • Dec 6 '17 • Edited

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

Natti Katz • Nov 28 '17

Sooo dope!

Promise Tochi • Dec 6 '17

Thanks! :)

sithembelek • Nov 29 '17

Brilliant.

Promise Tochi • Dec 6 '17

Thank you :)

Vikram Jaswal • Nov 30 '17

Brilliant. Thanks for sharing.

Promise Tochi • Dec 6 '17

Thanks for reading :)

Anton Rhein • Apr 6 '19

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 !

Dimitrije Djekanovic • Jan 28 '23

See this: medium.com/@dimitrijedjekanovic/ul...

Ayman Aladdin • Dec 8 '17

it helped me a lot thanks =)) ❤

Promise Tochi • Dec 11 '17

Glad to hear that :)

Abdelrahman Ismail • Dec 12 '17

Thank you!
I think this is related to your post

twitter.com/sarah_edo/status/85654...

Promise Tochi • Dec 12 '17

Yeah it is, thanks :)