How to make a Website Full Responsive


Responsive Web Design:- A responsive website design means "a design of a website which is suitable for all devices like mobile,tablet, iPad, and desktop, large desktop". In simple word we can say that a responsive website looks beautiful in every kind of device that means it's design automatically adjust according to the layout of the device. Now a days all websites are responsive and in the web development market, there is a trend of responsive web design. Because there are various benefits of a full responsive website.
Today, we are going to talk about responsive web design, how we can create a website as  full responsive, and what are the benefits of creating a responsive website.



How to create a responsive website:-

We can build our custom CSS  library to create a responsive website, otherwise we can use the available CSS libraries like bootstrap, w3.css etc. The best way to do this is to use the Bootstrap to design your website. Bootstrap is a CSS-framework that has been provided by Twitter. Bootstrap is a strong CSS framework. Bootstrap is available free, there is no charge to use it. We can download bootstrap from the official bootstrap website ( https://getbootstrap.com/docs/4.0/getting-started/download/ ). There are two versions available of twitter bootstrap in which one is bootstrap-3 and the other is bootstrap-4. Bootstrap-3 is an older version of the bootstrap and bootstrap-4 is the upgraded version. There are the difference of classes in bootstrap-3 and bootstrap-4. When you download bootstrap, there will be some bootstrap Javascript libraries that work with Bootstrap, such as performing some dynamic operation. So please keep that file in js folder and include in a web page. We have seen that we can also create a responsive website using Bootstrap and if we also use CSS media query then we can make our website fully responsive. So let’s see what is media query?

CSS Media Query:-

CSS media query is the type of css where we use css, according to width of the device like mobile and laptop. There are different media queries for all devices. In media queries we define the width of the device. Below are any media queries that are used for mobility, tablet and laptop.

Normal desktop:-
@media (min-width: 992px) and (max-width: 1169px) {}
 
Tablet desktop :-
@media (min-width: 768px) and (max-width: 991px) {}
 
Small mobile :-
@media (max-width: 767px) {}
 
These are the media queries that work according to the width of the device.
We can use css between these media queries. When website will open in these the device then the css that we write here will perform.

For example:-

@media (min-width: 992px) and (max-width: 1169px) {
     h1{
         font-size:13px;
     }
}

In this example we set the font size of heading h1 in normal desktop by using normal desktop media query. So we can make our website responsive by using Bootstrap and Media Query.

Benefits of Responsive Website:-

If we look, a responsive website has many benefits, like the first one is, the design of a responsive website does not misplaced in any device, it will automatically adjust according to the device layout.
And the other advantage is that if the design of our website is good in all devices then it will increase the performance of our website and Google does not ignore it.User's feedback will also be very good, so that a user will like our website and it will increase the chances of visiting user on our website repeatedly.So this was the information about responsive web design, if you have any query or question then you can comment here, we will revert on it ASAP.
 
 


No comments