CSS-запросы СМИ не работают 100% предложений?

Question

Я был погружен в веб-сайт, создающий среднюю конструкцию на этой новой работе. Короче говоря, я не являюсь сторонним разработчиком, и это действительно все, что нужно сделать в этот момент. Он был спроектирован для настольных ПК, а затем медиа-запросы уменьшались до меньших размеров. Весь набор со стилем:

@media (max-width:1200px) 
@media (max-width:990px) 

и т.д ...

Так что не передний конец дизайнер Я новичок в целом адаптивным дизайном. Мне удалось получить все, чтобы ответить и соответствовать тому, как я хочу использовать эти теги мультимедиа, но, например, все стили в диапазоне 1199px - 991px используют стили, которые я устанавливал, но на реальных 1200px или 990px ​​разрывается медиа-запрос, и я «Остался с фанк-макетом только для одного пиксельного диапазона. Есть ли более подходящий способ компоновки моих медиа-запросов, таких как минимальная и максимальная ширина, чтобы исправить это? Или еще лучше, есть ли действительно простое исправление для моей текущей настройки, даже если это не самый прагматичный подход? Просто пытаюсь обернуть этот сайт. Благодарим сообщества!

Answer 1

Запросы СМИ могут быть большой болью, если не написаны должным образом.

Если вы хотите автоматически настроить макет в соответствии с различными устройствами (или разными размерами экрана), попробуйте использовать Bootstrap.

Он предоставляет простой класс, все, что вам нужно, это добавить имя класса в свой div.

Например, чтобы подогнать div по экрану, вы добавляете col-lg-12 (lg для больших). Кроме того, есть мД, см и хз

Для контрольной проверки ссылка (средний, малые и дополнительные небольшие соотва.): http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

Answer 2

Похоже, медиа-запрос не написан хорошо, попробуйте написать их "и" .ie

@media screen and (max-width: 989px) { } 

Стили, указанные в круглой скобке этого запроса, будут использоваться, когда ширина экрана меньше 989 пикселей.

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

Этот запрос будет использоваться, когда размер экрана составляет от 1200 до 990 пикселей.

@media screen and (min-width: 990px) and (max-width: 1200px) { } 

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

@media screen and (min-width: 1201px) { } 

Если все еще возникают проблемы, вы можете добавить этот метатег внутри элемента head перед тегами заголовка.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Получил большую часть кода здесь, в stackoverflow. Надеюсь это поможет.