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 in comments.