Problems with media queries

问题

So I'm building my personal site using bootstrap. Currently I'm trying to make the content fit at the mobile sizes.

My problem is I can't quite remember how to use queries and the way I'm doing it stops working at a certain point.

So basically what I'm doing is putting the mobile CSS style in the main CSS then altering it as the screen gets bigger.

But for some reason the queries stop working after 992px.

Is there a better way to do this that will work and make more sense.

回答1:

Here is how you should use media queries:

Remember use the sizes you like/need. This below is just for demo purposes.

Non-Mobile First Method using max-width:

/*==========  Non-Mobile First Method  ==========*/

    @media only screen and (max-width: 960px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 768px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 640px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 480px) {
      /*your CSS Rules*/     
    }       
    @media only screen and (max-width: 320px) {
      /*your CSS Rules*/ 
    }

Mobile First Method using min-width:

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

    @media only screen and (min-width: 320px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 480px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 640px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 768px) {
      /*your CSS Rules*/     
    }       
    @media only screen and (min-width: 960px) {
      /*your CSS Rules*/ 
    }

Here is a good tutorial from W3.org

来源：https://stackoverflow.com/questions/28016406/problems-with-media-queries

标签

css

twitter-bootstrap

css3

twitter-bootstrap-3

media-queries