CSS Media Queries не читает настройки? - PullRequest
Новая
       7

CSS Media Queries не читает настройки?

0 голосов
/ 17 мая 2018

Я создаю пользовательскую сетку и хочу показать 4 столбца, если размер экрана большой, и 2 столбца, если минимальный размер экрана составляет 50 пикселей, а максимальный размер экрана составляет 400 пикселей.Я написал медиа-запрос, но он не работает.Вот мой код: 

.CustomGridHeader {
  width: 100%;
}

.Grid {
  width: 50%;
  float: left;
}

.item {
  width: 50%;
  float: left;
  border: 1px solid;
}

@media (min-width: 50px) and (max-width: 300px) {
  .Grid {
    width: 100%;
    float: none;
  }
}
<div class="CustomGridHeader">
  <div class="Grid">
    <div class="item">
      Item 1
    </div>
    <div class="item">
      Item 2
    </div>
  </div>
  <div class="Grid">
     <div class="item">
        Item 3
     </div>
     <div class="item">
        Item 4
     </div>
  </div>
</div>

Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 21 мая 2018

Я бы скорее предложил вам решение Flexbox , которое требует гораздо меньше кода: 

.CustomGridHeader, .Grid {display: flex} /* displays flex-items (children) inline */
.Grid, .item {flex: 1} /* stretches them so they take full and equal width */
.item {border: 1px solid}

@media (max-width: 400px) {
  .CustomGridHeader {flex-direction: column} /* stacks them vertically */
}
<div class="CustomGridHeader">
  <div class="Grid">
    <div class="item">
      Item 1
    </div>
    <div class="item">
      Item 2
    </div>
  </div>
  <div class="Grid">
     <div class="item">
        Item 3
     </div>
     <div class="item">
        Item 4
     </div>
  </div>
</div>
0 голосов
/ 17 мая 2018

Решение 

.CustomGridHeader {
     width: 100%;
}

@media (min-width:300px){
.Grid{
    width:50%;
    float:left;
 }

 .item
 {
    width:50%;
    float:left;
    /*border:1px solid black;*/
 }
}
 @media (min-width:50px) and (max-width:300px) {
   .Grid {
      width: 100%;
      float: none;
   }
   .item
 {
    width:50%;
    float:left;
    /*border:1px solid black;*/
 }
}
<div class="CustomGridHeader">
    <div class="Grid">
        <div class="item">
            Item 1
        </div>
        <div class="item">
            Item 2
        </div>
    </div>
    <div class="Grid">
       <div class="item">
            Item 3
       </div>
       <div class="item">
            Item 4
       </div>
    </div>
</div>

Обновление ответа после обновления вопроса, удаление границы элемента в 1 пиксель, из-за того, что для элемента с рамкой требуется 100% дополнительного, если вы хотите добавить элемент с границей, то вам нужно уменьшить ширину элемента класса в соответствии с шириной границы

Вы можете проверить это, изменив размер рабочего окна

Спасибо

...