Стиль "расщепления" в точке останова, медиазапросы - PullRequest
Новая
       14

Стиль "расщепления" в точке останова, медиазапросы

0 голосов
/ 27 мая 2019

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

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

@media (min-width: 500px) and (max-width: 768px) { 

     (ex.) #randomDiv {
     background-color: blue;
     width: 100px;  
     }
}

@media (min-width: 768px) and (max-width: 1023px) {

     (ex.) #randomDiv {
     background-color: red; 
     width: 300px; 
     }

}

Когда область просмотра достигает 768 пикселей, она решает смешать стили, т.е. цвет фона меняется на красный, но ширина не меняется. Кто-нибудь знает, что я делаю не так? После 768px (769px <) все работает просто отлично, как и до 768px. Пожалуйста, помогите. </p>

1 Ответ

0 голосов
/ 27 мая 2019

При использовании медиа-запросов для обеспечения адаптивности кода внешнего интерфейса полезно подумать о базовых или начальных стилях, а затем использовать запросы для изменения этих стилей только в одном направлении.Я имею в виду, вместо использования max-width и min-width в ваших запросах, начните со стиля, не связанного с запросом, а затем переопределите эти правила либо с помощью min-width ИЛИ max-widthно не оба.Таким образом, изменения будут плавными, и вам нужно только подумать о точном местоположении точки останова и о том, какие стили переопределяются.

При использовании этого подхода также важен порядок медиазапросов в вашей таблице стилей.Обратите внимание, что сначала идет самый широкий запрос, если бы я использовал min-width, вместо этого он пошел бы наоборот.

Попробуйте посмотреть на это в режиме «Полная страница» и измените размер экрана с полногоширина. 

#randomDiv {
  color: white;
  margin: 0 auto;
  padding: 20px;

  /* only background-color & width will change */
  background-color: purple; 
  width: 90%;
}
@media (max-width: 1023px) {
  #randomDiv {
     background-color: red; 
     width: 300px; 
  }
}
@media (max-width: 768px) { 
  #randomDiv {
     background-color: blue;
     width: 100px;  
  }
}
<div id="randomDiv">I am so random.</div>
...