Проблемы с медиа-запросами

Question

Итак, я строю свой личный сайт с помощью бутстрапа. В настоящее время я пытаюсь сделать контент подходящим для мобильных размеров.

Моя проблема: я не могу вспомнить, как использовать queries, и то, как я это делаю, перестает работать в определенной точке.

Так что в основном то, что я делаю, это поместить стиль мобильного CSS в основной CSS, а затем изменить его, поскольку экран становится больше.

Но почему-то запросы перестают работать после 992px.

Есть ли лучший способ сделать это, что будет работать и иметь больше смысла.

Answer 1

Вот как вы должны использовать media queries:

Помните использовать размеры вы любите/потребность. Это ниже для демонстрационных целей.

Первый метод Non-Mobile использованием 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