Responsive Web Pages Using CSS and Their Advantages

Posted By : Vivek Uniyal | 30-Apr-2019

Web applications are the most popular way to create an application without knowing about there Operating system but, there is a problem with that, we have to manage the application's view on different screen size (ex. mobile, tablet, desktop).
By using CSS @media  queries for responsive web page we can use the same page for mobile to the desktop by using different CSS styles on them according to there screen size. 
The most popular frameworks bootstrap and many other popular CSS frameworks use it and its reliable and best way to deal with the situation.


Advantages of using @media


Media queries can be used to check many things, like:

1. width and height of the viewport
2. width and height of the device
3. orientations (is the phone /tablet in landscape or portrait modes)
4. resolution(eg: 840x1024)


Browser support


These are the list of browsers that specifies the first browser version that will fully support the @media rule.

1. Chrome 21
2. IE 9
3. Firefox 3.5
4. Safari 4.0
5. Opera 9


How to use



@media not|only mediatype and (mediafeature and|or|not mediafeature) {


/* On screens that are 992px wide or less, go 4 four columns to 2 columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;

/* On screens that are 600px wide or less than it, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;

This is how we can achieve responsive web pages using media query and it's easy to use.

 We can also specify the style which we want to load using media query while linking the style on the basis of the screen.

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

By using this we can link only the style which is needed on that particular page at that time. It will reduce the files which will render on the page and also leave the unnecessary CSS behind.

thanks for reading, hope you enjoyed it. 

About Author

Author Image
Vivek Uniyal

Vivek is a Front-end developer and has knowledge of Angular, HTML 5, CSS 3, Bootstrap, and JavaScript. he also has working knowledge of Back-end as well.

Request for Proposal

Name is required

Comment is required

Sending message..