- You can use percentages for horizontal measurements.
- You can use relative units such as em and rem for vertical measurement and font sizes.
- You can use media queries to remove elements when the screen width falls below a specified threshold.
That third technique — the one where you remove stuff that doesn't fit on a smaller screen — is known in the web coding trade as regressive enhancement (RE). RE has ruled the web development world for many years, but lately there’s been a backlash against it. Here’s why:
- RE relegates mobile screens to second-class web citizens.
- RE leads to undisciplined development because coders and designers inevitably stuff a desktop-sized screen with content, widgets, and all the web bells and whistles.
What’s the solution? You’ve probably guessed it by now: progressive enhancement, which means starting with content that fits on a base screen width and then adding components as the screen gets bigger. When that original content represents what’s essential about your page, and when that base screen width is optimized for mobile devices — especially today’s most popular smartphones — then you’ve got yourself a mobile-first approach to web development.