Responsive web design is the approach to rendering webpages that adjust smoothly to various screen sizes. It is considered as one of the key implementation for better user experience and site performance.

RWD Components

Responsive web design can be divided into three main components:

• media queries
• flexible layouts
• flexible media (images, videos, etc...)

1️⃣ Media Queries

Media query is introduced in CSS3 that applies certain set of CSS properties to the HTML elements if the condition statement associated with the @media query is true.

For example in the below CSS snippet, if the browser size is between 480-767px, the background color will be set to grey for all the h1 elements.

/* Tablets */
@media only screen and (max-width: 1023px and min-width: 768px)  {
	h1 {
		background-color: grey;
	}
}

Media query breakpoints are the pixel values that a developer/designer can define in CSS. When a responsive website reaches those pixel values [from 480-767px], a transformation (such as the one detailed above - background color of h1 elements set to grey) occurs so that the website offers an optimal user experience.

Commonly used breakpoints for different orientation of the devices are as follows:

2️⃣ Flexible Layouts

The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.

When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.

The main axis is defined by flex-direction, which has four possible values:

• row
• row-reverse
• column
• column-reverse

By choosing row or row-reverse , the main axis will run along the row in the inline direction.

By choosing column or column-reverse , the main axis will run from the top of the page to the bottom — in the block direction.

The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns.

If your main axis is column or column-reverse then the cross axis runs along the rows.