Guidelines Of Developing A Web Page Responsive
Posted By : Saloni Arora | 27-Jun-2018
An Application Must be developed That can be used or can be opened on any device like Mobile, Desktop, Large Computers, So This Simply Means a responsive web design.
Here, are some of the guidelines and Information about How we can develop An Application Which is Responsive And can be seen on any device. Responsive Design let us Do various Things with our elements Like We can shrink it enlarge it and it will adapt the Width of the particular device without breaking out.
Some Major Aspects Comes Under It.
1) Viewport.
2) Grid System
3) Media Query.
By understanding all these things we can easily make our website or webpage responsive.
VIEWPORT :
A viewport is basically that area of the webpage which is visible to the User.
It Varies on Various Devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">.
a) The <meta> tag gives the instruction to the browser to scale the dimensions
b) width=device-width: this sets the width of the page to attain the screen width of the device.
c) initial-scale=1.0: This sets the Base Zoom Whenever the page is loaded into the browser.
GRID SYSTEM
This Means that the page is divided into grids that are columns. A Page Has 12 Columns.
A row contains 12 columns.
and also it can be divided
<div class="row">
<div class="col-md-6"> </div> : Width 50%.
<div class="col-md-6"> </div> : Width 50%.
</div>
MEDIA QUERY
This can be Implemented on various screen width.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
body {
background-color: Grey;
}
@media only screen and (max-width: 600px) {
body {
background-color: Whitesmoke;
}
}
By resizing it we can see the colors changing on different screen width.
Min Width and Max Width are two aspects on the basis of which we can give the media query to our web page design. So these were the following things that we should keep in mind while making a web page responsive.
Thanks,
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Saloni Arora
Saloni Arora is a very positive person she always likes to take things positively. she has a desire of being a talented Front end developer . and she is seeking to grab more opportunities in future