Responsive Web Design is also known as RWD, may be you heard already this name. Now a days RWD is in high demand, every website wants their website should be a responsive for all device or else user experience will become very worst especially in terms of mobile browsing.
So, the question is how you achieve this?
You can achieve this by using of CSS Media Query.
Media query is introduced in CSS3 , it is a new technique to write your style code for targeted screen or device. It start with @media to make a css block for your css properties and it’ll only work if a certain condition is true.
For example :
If you are opening the same website on mobile but wants to be a different background, let’s see the code below –
/* CSS for large screen */
body{
background : '#fff';
}
/* CSS for mobile screen */
@media only screen and (max-width: 414px) {
body{
background : '#1266D9'; /* blue background */
}
}
Explanation : In the above block of code we write two types of css style for same element(body), so first css property will work for all devices except 414px or lower screen size. And 2nd block of code under @media will only work on mobile devices or screen whose size is 414px or lower then 414px.
So, this way we can write our design code for different devices or screen size. But this is really tough work to remember all screen resolution. That’s why i created one separate responsive css file which content all the commonly used device resolution @media query. You can just include this file into your website and write code for a particular screen resolution.
All in one responsive css media query.
/* CSS for Extra Large (xl) screen */
@media only screen and (max-width: 1366px) {
/* Write your code here */
}
/* CSS for Large (lg) screen */
@media only screen and (max-width: 1280px) {
/* Write your code here */
}
/* CSS for Large (lg) screen */
@media only screen and (max-width: 1152px) {
/* Write your code here */
}
/* CSS for Large (lg) screen */
@media only screen and (max-width: 1024px) {
/* Write your code here */
}
/* CSS for Large (lg) screen */
@media only screen and (max-width: 992px) {
/* Write your code here */
}
/* CSS for Medium (md) screen */
@media only screen and (max-width: 800px) {
/* Write your code here */
}
/* CSS for Medium (md) screen */
@media only screen and (max-width: 768px) {
}
/* CSS for Medium (md) screen */
@media only screen and (max-width: 600px) {
/* Write your code here */
}
/* CSS for Extra Small (xs) screen */
@media only screen and (max-width: 414px) {
/* Write your code here */
}
/* CSS for Extra Small (xs) screen */
@media only screen and (max-width: 394px) {
/* Write your code here */
}
/* CSS for Extra Small (xs) screen */
@media only screen and (max-width: 375px) {
/* Write your code here */
}
/* CSS for Extra Small (xs) screen */
@media only screen and (max-width: 360px) {
/* Write your code here */
}
/* CSS for Extra Small (xs) screen */
@media only screen and (max-width: 320px) {
/* Write your code here */
}
/* CSS for Extra Small (md) & Landscap screen */
@media only screen and (max-width: 823px) and (min-width:801px) {
/* Write your code here */
}
/* CSS for Small (sm) & Landscap screen */
@media only screen and (max-width: 667px) and (min-width:601px) {
/* Write your code here */
}
/* CSS for Small (sm) & Landscap Mobile screen */
@media only screen and (max-width: 568px){
/* Write your code here */
}
All in one responsive css media query.
Note : Before using the above file you should include responsive meta tag to your <head> section –
<meta name="viewport" content="width=device-width, initial-scale=1.0">