媒体查询的问题

Question

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

我的问题是我不太记得如何使用 queries 并且我的操作方式在某个时候停止工作。

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

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

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

Answer 1

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

请记住使用您 like/need 的尺码。以下仅用于演示目的。

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

这是来自 W3.org

的 tutorial

媒体查询的问题

Problems with media queries

css

media-queries

twitter-bootstrap

twitter-bootstrap-3