CSS breakpoints for non technical people
Simone Dall'Angelo
Executive Advisor @ Twig | Bringing different technologies together to make your business goals a reality
We have already covered responsive design (here is the article), but how does our design adapt to different screen sizes? Thanks to CSS breakpoints!
Simply put, CSS breakpoints are points at which your site's content will "break" or change to suit better the device it's being viewed on.?
For example, a CSS breakpoint might change the way your site looks on a mobile phone versus a desktop computer based on the width of the viewport (in other words, the width of the area of the browser in which the website appears).
Once some CSS rules are in place, our website can appear totally different based on the size of our browser.?
It's common to see elements on the page that change position and size, but nothing would block us from making the desktop version "red" while the mobile one "green" (if it makes any sense).
But, how do these rules appear?
Conceptually they are quite easy; we can setup a set of CSS rules that apply only when the screen width is less/more/between some specific values and the browser rendering will do all the rest for us.
Summarizing: you already know how it is important to design your website in a responsive way; today, we learned how our developers achieve these results by setting some high-level CSS rules and letting the browser do its job: the rendering!
---
This series of articles is dedicated to managers who are not technical but need a quick introduction to technical topics from various subjects to be more aware in their work.