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...
Collapse
 
chiangs profile image
Stephen Chiang • 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));
  }
}
Collapse
 
promisetochi profile image
Promise Tochi

Wow, thanks for pointing that out, Stephen 😅

Collapse
 
trebuhd profile image
Hubert Dworczyński

Cool! Any chance for a codepen demo?

Collapse
 
alex_escalante profile image
Alex Escalante • 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…

Collapse
 
promisetochi profile image
Promise Tochi

oh. That looks interesting for Javascript values

Collapse
 
alex_escalante profile image
Alex Escalante • Edited

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

Collapse
 
katzy687 profile image
Natti Katz

Sooo dope!

Collapse
 
promisetochi profile image
Promise Tochi

Thanks! :)

Collapse
 
sithembelek profile image
sithembelek

Brilliant.

Collapse
 
promisetochi profile image
Promise Tochi

Thank you :)

Collapse
 
vikramj74 profile image
Vikram Jaswal

Brilliant. Thanks for sharing.

Collapse
 
promisetochi profile image
Promise Tochi

Thanks for reading :)

Collapse
 
muchwowdodge profile image
Anton Rhein

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 !

Collapse
 
djekanovic profile image
Dimitrije Djekanovic
Collapse
 
ayman_1012 profile image
Ayman Aladdin

it helped me a lot thanks =)) ❤

Collapse
 
promisetochi profile image
Promise Tochi

Glad to hear that :)

Collapse
 
ismail9k profile image
Abdelrahman Ismail

Thank you!
I think this is related to your post

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

Collapse
 
promisetochi profile image
Promise Tochi

Yeah it is, thanks :)