Create responsive websites with CSS3 media query

Create responsive websites with CSS3 media query

You all know that media query is used in CSS3 to make screen based styling and it’s a great option to make responsive websites. Nowadays most of the designers using CSS frameworks like Bootstrap, Baseguide, Foundation and more, but sometimes we need to make something without framework then you must know how to use media query.

Using media query in CSS is very simple and easy

We have 3 ways to use media query.

1. @import Method import CSS files
2. Writing media query in single CSS file
3. including linked CSS

1. @import Method import CSS files

@import url(style320.css) screen and (min-width: 320px);
@import url(style544.css) screen and (min-width: 544px);
@import url(style768.css) screen and (min-width: 768px);
@import url(style992.css) screen and (min-width: 992px);
@import url(style1200.css) screen and (min-width: 1200px);

2. Writing media query in single CSS file

<style type="text/css">
/* CSS code except media */
 
@media only screen and (min-width: 320px){
/* 320px device css */
}
 
@media only screen and (min-width: 544px){
/* 320px device css */
}
 
@media only screen and (min-width: 768px){
/* 768px device css */
}
 
@media only screen and (max-width: 992px) {
/* 992px device css */
}
 
@media only screen and (min-width: 1200px){
/* 1200px device css */
}
</style>

3. including linked CSS

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="style320.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 544px)" href="style544.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="style768.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 992px)" href="style992.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1200px)" href="style1200.css" />

I hope this post help you please give your feedback or if any question, please ask in comments.

Author Surjit Sidhu

Surjit SidhuSurjit is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling.