Create responsive websites with CSS3 media query

Datetime:2016-08-23 03:05:25          Topic: CSS3           Share

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 CSSframeworks likeBootstrap, 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

Tips and Tricks for Developer to Avoid Common CSS Mistakes

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

<styletype="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

<linkrel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="style320.css" />
<linkrel="stylesheet" type="text/css" media="screen and (max-device-width: 544px)" href="style544.css" />
<linkrel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="style768.css" />
<linkrel="stylesheet" type="text/css" media="screen and (max-device-width: 992px)" href="style992.css" />
<linkrel="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.





About List