if value == 'inherit' || value == 'auto' || value == 'none' || value == 'cover' || value == 'contain' || value == 'smaller' || value == 0 || value == null
‘Because web development shouldn’t require a calculator.’
<pstyle='text-align:center;'><em>‘Because web development shouldn’t require a calculator.’</em></p>
Pixels are easy to understand and visualise but using them can make it harder to create responsive designs. They also don’t scale well in ancient browsers. Ems solve those problems but they are difficult to visualise and cumbersome to use without a calculator. Rems require less cognitive load to use than ems and, since they are still relative units, are useful in responsive design. Rems still involve maths, however, and are hard to visualise like ems. Responsive Pixels, the concept introduced in this post, gives you all the advantages of using pixels combined with all the advantages of using rems. So you get a relative unit that is also easy to visualise. A responsive pixel is a pixel that is equivalent to a rem.
Responsive pixels is a [Stylus](https://learnboost.github.io/stylus/) library where you code your styles pixels and they automatically get translated into rems with pixel fallbacks.
## Think in pixels, deploy in rems.
Pixels are easy to understand, use, and visualise. But they’re not very responsive.
Ems solve those problems but they are difficult to visualise and cumbersome to use without a calculator.
Rems are easier to use than ems and, since — like ems — they’re relative units, they are useful in responsive design.
Rems still involve maths, however, and are hard to visualise like ems.
Responsive Pixels gives you all the advantages of using pixels combined with all the advantages of using rems.
A responsive pixel is a pixel that is equivalent to one rem.
So you get a relative unit that is also easy to visualise.
