Question

我使用Bootstrap 3开发了一个复杂的响应式网页布局。布局很好地显示了排列和安排。在不同的屏幕尺寸上按预期显示。

但是，我是否可以禁用某些案例使用的响应以便我设置特定的布局显示，例如xs，然后它将显示xs布局，无论它是什么屏幕？

我在想是否可以通过使用位于@media查询的JavaScript来完成？或者，通过使用其他方法可以更容易地完成？

Answer 1

它完全依赖于您使用媒体查询的方式和您的需求

根据您的需要使用以下

 @media only screen and (min-width:960px){
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width:1440px){
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width:2000px){
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width:480px){
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width:768px){
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }

Answer 2

在某种程度上是一个有趣的问题。

看看这个小提琴并慢慢调整窗口大小，这样你就可以同时看到所有Bootstrap col-XX-XX发生了什么。

我已经设置了一组cols，以向您展示如果您刚刚使用XS类会发生什么......就像您想要做的那样。

当调整窗口大小时，观察其他类别与XS cols的紫色类别相比有何不同。

您还可以根据需要推送自己的 here 并设置自己的断点。

全尺寸 Fiddle 此处。

通过谎言@media查询进行无响应的Bootstrap

2 个答案: