Responsive Web Design

4 min readApr 9, 2021

What Is Responsive Web Design?

It suggests that the design and development of web pages should respond to change in environment and user need. It should depend on screen size, platform and orientation (landscape or portrait) and adjust accordingly.

How can we achieve it?

There are multiple methods that help us achieve it. Some of them are as listed below.

Setting the View-port
Using responsive elements (images, texts, etc)
Using media queries
Using fluid Grids Layout instead of fixed
Using Bootstrap

Setting the View-port

View-port is the the area of web page in which the content is visible to the user. If the web-page is not responsive, it might look bad on smaller screen/devices. Hence a tag is added to make it responsive.

<meta name=”viewport” content= “width=device-width, initial-scale=1.0”>

This is a meta tag which is included in the <head></head> section. In the above example the viewport size is governed by the width of device. The width can also be set here as something definite like 600px or so.

There can be multiple attributes in this tag as follows:

width: Width of the virtual view-port of the device.
height: Height of the virtual view-port of the device.
initial-scale: Zoom level when the page is first visited.
minimum-scale: Minimum zoom level to which a user can zoom the page.
maximum-scale: Maximum zoom level to which a user can zoom the page.
user-scalable: Tells if the user is allowed to to zoom in or out.(value= yes/no).

Responsive Elements

For Images, the developer can implement this by setting the height or width to 100% or max-width to 100%. In either case, the percentage value shows 100% of the view-port or the screen. The attribute set as 100 percent (for example width) will scale down if the screen size decreases and will hence be responsive. If value of width is set then it will also scale up when the size increased while if the max-width = 100% then it does not scale up more than its original dimensions. We can also experiment by changing the image when the screen dimensions increase using the picture tag.

For Text, we can set text with set with a “vw” unit, which means the “viewport width” instead of px or anyother unit. 1vw = 1% of viewport width.

Media Queries

Media queries are used to create different designs for different browsers and device size. They can be used to alter the elements or even hide some elements for screen size smaller than a particular value.

@media includes a block of CSS properties if the condition stated with it is true.
It is used to target specific media like change value of <h1>, <style> etc.

For example:

@media only screen and (max-width: 600px) {
div.box {display: none; }
h1 { fontsize: 1em;}
}

If the width is 600px or less the element div.box would disappear from the screen. Also the font size of h1 tag would reduce to 1em from it’s default value.

@media only screen and (orientation: landscape) {
body {background-color: yellow;}
}

The web page will have a yellow background if the orientation is in landscape mode.

Fluid Grids

It is easier to work in grids while designing the web-page. We can switch to a fluid grid system from a fixed grid by using percentage based layout. If there is change in screen or device size, the elements adjust their widths and heights to the proportions specified according to their parent container.

Check these out:

Fluid Grid 1

Fluid Grid 2