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*/ 
    }

这是来自W3.org的好tutorial

媒体查询的问题

1 个答案: