What is Responsive Design and Media Queries?

Have you ever wondered how websites look their best on all the different kinds of screens out there? No? Just me? Ok. Well, I’m here to tell you how responsive design makes that happen!

Examples of responsive design
Examples of responsive design. See how the content layout looks different on each device? Photo courtesy of Segue Technologies

Responsive design is an approach to web design that makes the web content adapt to different device screen and window sizes. A very common example of this is a website on a desktop that has many different columns of content. It looks fine on a desktop because the screen is wide, but once you put it on mobile, either the content gets cut off or the content gets so small that you can’t read it. So how do we fix this problem? On mobile, we will instead make these columns into rows and stack them on top of each other. This way, the content will be seen clearly whether it’s on a desktop or on mobile.

So how do we work this responsive design magic? We use CSS! In my projects where I have implemented responsive design, I used something called media queries to help me do that. Media queries let you render content based on different factors such as screen size or screen resolution.

@media screen and (max-width: 768px) {/* whatever you want your content to look like when the screen size is 768px or smaller */}

You might be thinking gee, why 768px? This is the size of most tablets. We call these “breakpoints,” which is the width of the screen when you want your CSS to start reflecting changes.

Here is a helpful graphic of common screen resolutions:

Photo courtesy of Online Design Teacher

If you’d like to read more on media queries, here is a helpful article. Thanks for reading and hope you learned something new about responsive design!