Questions regarding responsive site

Consider using/learning Bootstrap or Foundation. These responsive frameworks come with all of the media quieries/break points. Because they've been around for a while and are (very) popular, they seem to have adopted a 'standard'.

Here are the breakpoints that Bootstrap uses:
< 768   extra small
>= 768  small
>= 992 medium
>= 1200 large

http://getbootstrap.com/css/  shows the media queries.
And yes, you can put them all into one style sheet.

You can of course change these if you have a specific application.

Thanks,yes i know about Bootstrap or Foundation but i prefer to have my own design and use from some components of Bootstrap or Foundation like 'navigation'.

I want put breakpoints in  media query for 3 devices(mobile-tablet-desktop) in css file,please write the correct media query for these 3 devices.

For example for mobile (this is an example ,please writ the right and common amount in pixel :
@media ( max-width:580px){
}

There are two schools of thought when it comes to responsive design
   - mobile-first (recommended)
   - desktop-first

Here are some breakpoints you can start with, using the mobile-first approach:

/*==========  Mobile First Method  ==========*/

/* Custom, example, smallest minimum breakpoint */ 
@media only screen and (min-width : 320px) {
    
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    
}

Select allOpen in new window

Yesterday i had a question in this regard that "must we design first for mobile or desktop?" but because nobody answer it i thought that it is a potty question and then i deleted that Q!!.

But it is important as you said,so i have some question regarding your codes:

-The order of @media{} in css file is important for  mobile-first (recommended) or desktop-first?

-Is it possible that we combine the codes so we have one @media{} for each device?
Because i think in my case it is no different between 320px and 480px(for mobile) ,but like that site be good in these ranges,so putting @media{max-width=480px}  for mobile cover all size below also? or we must set separately for 320px and 480px?

Thank you very much.