Что я делаю не так, учитывая, что div не будет масштабироваться в зависимости от ввода медиазапроса? - PullRequest
Новая
       16

Что я делаю не так, учитывая, что div не будет масштабироваться в зависимости от ввода медиазапроса?

0 голосов
/ 15 октября 2019

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

Я пытался использовать Media Queries 4, например @media (30em <= width <= 50em) {... } но jsut у меня не работает (кстати, проверяется совместимость браузера), поэтому я выбрал классическое написание кода (которое вы можете увидеть ниже). К сожалению, мои div не будут масштабироваться должным образом, я явно пропускаю что-то вроде родителя-ребенка, не разделяющего правильные настройки, но я не вижу этого. Не могли бы вы указать на мою ошибку, пожалуйста? Все, что нужно сделать, это масштабировать div, если ширина меньше 600, между 601 и 960 и выше 961 (obv .px) </p> 

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Mobile Styles */
@media only screen and (max-width: 600px) {
  body {
    background-color: #F09A9D;
  }
}

/* Tablet Styles */
@media only screen and (min-width: 601px) and (max-width: 960px) {
  .sign-up,
  .feature-1,
  .feature-2,
  .feature-3 {
    width: 50%;
  }
}
/* Desktop Styles */


@media only screen and (min-width: 961px) {
  .page {
    width: 960px;
    margin: 0 auto;
  }
  .feature-1,
  .feature-2,
  .feature-3 {
    width: 33.3%;
  }
  .header {
    height: 400px;
  }
}

.page {
  display: flex;
  flex-wrap: wrap;
}

.section {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  background-color: #5995DA;
  height: 80px;
}

.header {
  background-color: #B2D6FF;
}

.content {
  background-color: #EAEDF0;
  height: 600px;
}

.sign-up {
  background-color: #D6E9FE;
}

.feature-1 {
  background-color: #F5CF8E;
}

.feature-2 {
  background-color: #F09A9D;
}

.feature-3 {
  background-color: #C8C6FA;
}

HTML - это просто набор div с img srcвнутри них. Вывод один и тот же, независимо от размера окна браузера.

1 Ответ

0 голосов
/ 15 октября 2019

@ sbrrk прав. Кроме того, вы должны написать свои медиа-запросы в самом низу, чтобы они переопределяли другие правила той же специфики

...