How does responsive design work?
Responsive Web design uses three techniques: media queries, flexible images and fluid grid layouts.
A media query discovers information about the device a website is being viewed on, and allows us to apply certain rules about the styling of the website to certain devices based on that information. In responsive Web design, we use media queries to assign style rules to certain screen widths. It is important to note that the media query detects the size of the window of the browser the website is being viewed in, not the size of the physical screen on the device. Because of the wide range of screen sizes available, there are no longer distinct breaks between the screen widths of types of devices – for example, the smallest tablet is close in screen size to the largest phone. So instead of targeting specific devices, we use the media queries to target widths where a change in the styling will make the website more functional and visually appealing.
Flexible images are images that change in size as the screen does. We do this by assigning the width of the image as a percentage rather than a specific number of pixels. To ensure images don’t get too big or too small, we use a fluid grid layout.
A fluid grid layout allows the website to change as the size of the screen changes. As with the images, rather than assigning a specific number of pixels as the width of an element on the website, we use percentages. This way the element will shrink or expand as the screen does. To ensure elements don’t get too big or too small, everything is build on a grid, and the elements shift on the grid as the screen size changes.
We create this shift by creating different layouts for the different screen sizes we are targeting with the media queries. For example, you can have a sidebar that sits on the right of the page and takes up one third of the page when the site is viewed on a desktop and tablet. On a mobile phone one third of the page will not be enough room for the information in the sidebar to be legible, so we move it to below the other content that was taking up the left two-thirds of the screen, and both elements will be the full width of the mobile phone’s screen.
All three of these techniques are used together to make a page respond to the screen size. For example, take a website with six images that display in two rows of three on a standard laptop computer, each one-third of the width of the page. If the same website is viewed on a large desktop screen, the media query recognizes that the screen is larger, so it changes to the layout we have assigned to this screen size, and displays the images as one row of six, each one sixth of the width of the page. On a mobile phone the images will display in six rows of one image the full width of the screen, and on a tablet the images will display in three rows of two images half the width of the screen. Because the media query detects the size of the window, not the screen, these changes will also appear if the viewer resizes the window of his or her browser.