Scaling CSS

What is all of this?

Scaling CSS is a simple solution to a growing problem faced by every web developer today -- adaptating to any device. Every few days a new device is launched with a new resolution or pixel density... when using scaling CSS techniques, your website looks perfect on anything and everything.

As an example, this website will fit on any device you throw at it whether it is a phone from 2010 or one of today's 4k smart televisions... with no zooming required!

How is it even...

The REM unit (Root Element Magic, as I call it) is a float based on your html's font-size property, e.g: html { font-size: 10px } means that 1rem == 10px. You can (and should) use REM units anywhere you use "px" today. Scaling is achieved by increasing the html font-size on a sliding scale proportionately based on the width and orientation of the users screen. With some basic math you can ensure that the content never touches the edge of the screen or the bezel of a handheld device.

Here are the combined theories that make this work:

But what if...

This system has been put through rigorous testing over the past 2 years in a corporate environment with traffic in the millions per day.

Want to help?

I am looking for other developers that are passionate about elegant and simple code to help with the development of this system. Reach me @chriswritescode or on codepen if you are interested! There is also a git repo with a scaling framework available here.