We need to write our media query
for the following resolutions in our css file. 320px, 480px, 600px, 800px,
960px, 1024px and 1280px+. So @media will from 320px to 479px, 480px to 599px,
600px to 767px, 768px to 959px, 960px to 1023px, 1024px to 1279px and lastly the
default css which display 1280px and higher resolutions. If your design layout
is below 1024px the you need not to write media query for 1024px to 1279px.
For the above criteria the css file should be like this
/*
Your default css code goes here..
*/
@media (min-width: 960px) and (max-width: 1023px) {
/* CSS for browsers less than 1024px*/
}
@media (min-width: 768px) and (max-width: 959px) {
/* CSS for browsers less than 960px*/
}
@media (min-width: 600px) and (max-width: 767px) {
/* CSS for browsers less than 768px*/
}
@media (min-width: 480px) and (max-width: 599px) {
/* CSS for browsers less than 600px*/
}
@media (min-width: 321px) and (max-width: 479px) {
/* CSS for browsers less than 480px*/
}
@media (max-width: 320px) {
/* CSS For 320px or less browsers */
}
Though there is no standing rule for device width, you can use
media width for any screen resolution. The above is just a sample to show how to
define @media and write css code.
Click here to view list of
devise and screen resolution in pixel.
