Невосприимчивый Bootstrap через запросы lie @media

Question

У меня есть сложный отзывчивый макет веб-страницы с использованием Bootstrap 3. В макете приятно показано расположение &, как и ожидалось, на разных размерах экрана.

Однако, возможно, что я могу отключить реагирующий на определенный случай использования, так что я установил конкретный дисплей макета, такие как xs, то это будет показано xs расположение независимо от того, какой экран это?

Я думаю, что это можно сделать, используя JavaScript, лежащий в @media-запросах? Или это может быть проще сделать с помощью другого метода?

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.

Вы также можете при необходимости развернуть свой собственный here и установить свои собственные контрольные точки.

Полный размер Fiddle здесь.