Медиа-запросы, не относящиеся к пикселям на сайте

0

Я создаю отзывчивый сайт, но когда я изменяю размер окна, медиа-запросы не соответствуют моему разрешению экрана, так, например,
Экран @media и (min-width: 640px) и (max-width: 800px) приводят к тому, что эти элементы дизайна будут, когда экран превышает 800 пикселей, и когда я на 700 пикселей, мои проекты устанавливаются на @media screen and (min-width: 400px) and (max-width:640px) по какой-то причине. Кто-нибудь знает, почему это может произойти?

Update: The max-width 640px media query is being set to my screen at over 700 pixels still. 

@media screen and (max-width: 1024px)  { 
.body{
    width:800px;
}

}

@media screen and (max-width: 800px) { 
    .body {
        width:600px;
    }

}

@media screen and (max-width:640px) { 
    .body {
        width:480px;
    }
}

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

.body {
    width:260px;
}

}

  • 0
    Трудно сказать, не видя ваш код.
Теги:
responsive-design
media-queries

1 ответ

0

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

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

Дайте мне знать, как вы поживаете.

редактировать

Спасибо за дополнительный код. Проверьте этот рабочий пример. CSS и порядок медиа-запросов приведены ниже:

/* set default  */
.body{
    width:800px;
  }

@media screen and (max-width:400px) {
  .body {
    width:260px;
  }
}

@media screen and (min-width: 401px) and (max-width:640px) { 
    .body {
      width:480px;
    }
}



@media screen and (min-width: 641px) and (max-width: 800px) { 
    .body {
       width:600px;
    }
}

@media screen and (min-width: 801px) and (max-width: 1024px)  { 
  .body{
    width:800px;
   }
}
Поделиться
  • 0
    Да, это в моем заголовке
  • 0
    но он по-прежнему отображает изменения в неправильных разрешениях
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню