‘Because web development shouldn’t require a calculator.’
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.