The Magic of Responsive Websites: Media Queries

Elle D
1 min readApr 11, 2021

Ever wonder how a webpage knows that you are looking at it from your phone and not your computer? Like how does the webpage make itself smaller when you are on your phone but its bigger when you are on a computer?????!?!?!?

Probably not! Nowadays this just happens without us putting too much though into it. (That wasn’t always the case. Back on the day, it was not easy to view webpages one a smaller screen without having to zoom in or zoom out to see all of the webpage.) But behind the scenes, there is magic happening now! And it’s all thanks to Media Queries.

Media Queries take place in your CSS file and they help determine what the user will see based on the width of the screen they are currently viewing on. Today in this short vlog, I’ll be demonstrating the awesomeness that is Media Queries.

Annnd that Media Queries in a nutshell! Of course there is way more to do and learn when it comes to it. My hope is that you learned something new and are inspired to add this CSS technique to your projects. Be on the look out for more blogs/vlogs next week. Until then….Happy coding Ya’ll 😜!

--

--