Responsive Web Design : Part I. Today we are going to learn about…
Today we are going to learn about responsive web design. Internet usage through mobiles is increasing at a tremendous pace and it is expected to grow in times to come.

This posed a new challenge for the web developers. How to build websites for all kinds of devices. Some very smart people came up with responsive web design as the response.

It makes the website work on all devices irrespective of the screen size.

Broadly classified responsive web design have three main components:

Flexible Layouts: One of the methods to create a flexible layouts is by building flexible containers. We can do this by simply changing, the ‘width’ property of the container, to max-width. Media Queries: They enables us to specify different styles different devices.

Figure 1: Media Queries Example

Media query includes one following media types: all, screen, print, tv and braille. In HTML5 introduced new media types including 3D glasses. Screen is the default the media type.

Logical Operators in Media Queries: Logical operators in media queries are ‘and’, ‘not’ and 'only’.

The ‘and’ operator allows extra conditions to be added.

The ‘not’ operator negates the query.

The ‘only’ operator selects one type of queries and operates on them only.

Figure 2: Media Queries Example

Height & Width Media Features:

Figure 3: Max-width and Min-width

One of the most commonly used features are max-width and min-width. It reduces confusion with device screen sizes.

The third and the last component of responsive web design is Responsive media which is to be discussed in the next chapter.

THANK YOU!
['Vivek Baruah']
['Coding', 'CSS', 'Responsive Web Design', 'Codingbootcamp']