Open In App

What to understand about Responsive Websites ?

Improve
Improve
Like Article
Like
Save
Share
Report

Websites that can change their appearance dynamically according to the device or the screen in which it is viewed are called responsive websites. It uses the concept of breakpoints to determine the appearances of websites on different screens. Breakpoints are specified on the basis of the width of the device’s browser which means the experience on all the screens is different according to their widths, making it look good on all devices, using the same HTML. 

Common browser sizes of different devices are as follows:

  • Mobile: 360 x 640
  • iPhone X: 375 x 812
  • Pixel 2: 411 x 731
  • Tablet: 768 x 1024
  • Laptop: 1366 x 768
  • HDdesktop: 1920 x 1080

Responsive websites also solve the problem of designing different websites for different devices as the content can be adjusted accordingly, unlike normal websites.

A great example of a responsive website is the GeeksforGeeks website:

  • Phone view

Phone view of the website

  • Tablet view

Tablet view of the website

As you can see in both the pictures, all the content was adjusted according to the device width and text, and image size increased with an increase in width and decreased with a decrease in width.

How to make a website responsive?

The following are the ways to create a responsive website:

1. The very first step is to include the following meta tag to your code’s head tag.

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

This will set the viewport, adjust the content according to the device’s screen width, and will load the page in its initial zoom level in the browser. 

Example: Views with and without meta tag.

Without meta tag

With meta tag

2. Making the text size responsive: Responsive text size is the one, which changes according to the browser size i.e. scale up when the width is increased and scale down when the width is decreased. The text can be made responsive using the viewport width property i.e. vw unit.

<h3 style="font-size:6vw; color:green">
    GeeksforGeeks
<h3><br>

<h4 style="font-size:4vw">
    The content on GeeksforGeeks has been 
    divided into various to make it easily 
    accessible for the users.
</h3>

Example: Responsive and Non-responsive text size:

Non-responsive text size

Responsive text size

Responsive text size increased with an increase in browser width as in the second image.

3. Making image responsive: Images that can change their dimensions according to the browser width are responsive images. An image can be made responsive by applying the CSS property of width to it and setting it as 100% so it can scale up or down accordingly.

<img src="gfg_logo.jpg" style="width:100%;">

Example: Responsive and non-responsive image:

Non-responsive image

responsive image

As in the second image, the responsive image changes its scale according to the device width.

4. Media Queries can be used to make the website responsive: Media queries are part of CSS3, along with making text size and images responsive, it also provides a wide range of properties, using which website can be made more appealing. 

We can set different properties for different screen sizes. For example, when the website is viewed on a phone, it will show a rose and when it is viewed on a tablet it will show the image of a lily. Or changing the background color according to the browser width. 

@media(max-width: 500px) {
    body {
        background-color:pink;
    }
}
@media(min-width: 501px) {
    body {
        background-color:black;
   }
}

Example:

The device with a width less than or equal to 500px

The device with a width of more than 500px

The device browser having a width less or equal to 500px has a background of pink color and the device with a width more than 500px has a background of black color. This is all done with simple media queries, we can add more such breaking points to the website.

5. Flexbox for responsive websites: Flexbox is also a very powerful module of CSS that helps in making the website responsive. It has very unique and effective properties that perform even complex tasks very easily. It can also be used to shrink or expand the elements in a container even if the size of elements is unknown.

Syntax:

.flex {
    justify-content: space-between;
}

Example: The below pictures depict the various effects of different properties on the website. There are many more such properties that make the website look good and make the visitors’ experience enjoyable.


Last Updated : 07 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads