In the last post I gave an overview of what responsive design is and what problems it solves. In this post I’ll look at how we can implement a responsive site by looking into the viewport and CSS media queries. This post will not cover design principles such as mobile first or grid systems, but will demonstrate how media queries work and how to apply them to a page.
Responsive design is a technique that allows developers to maintain a single code–base for their site and alter how the pages look by using Media Queries. This means each page is represented by a single URL and with the same HTML code regardless of the device accessing it. This has a number of advantages.