twitter-bootstrap - 媒体查询的问题

Question

所以我正在使用 bootstrap 构建我的个人网站。目前，我正在努力使内容适合移动设备尺寸。

我的问题是我不太记得如何使用 queries 并且我正在做的事情在某个时候停止工作。

所以基本上我所做的是将移动 CSS 样式放入主 CSS，然后随着屏幕变大而改变它。

但由于某些原因，查询在 992px 后停止工作。

是否有更好的方法来执行此操作并且更有意义。

Answer 1

这里是你应该如何使用 media queries :

请记住使用您喜欢/需要的尺寸。以下仅用于演示目的。

非移动优先方法使用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*/ 
    }

移动优先方法使用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*/ 
    }

这是一个很好的tutorial来自 W3.org