Как предотвратить преждевременный запуск базовых стилей медиа-запросами?

Question

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

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

Что я заметил, так это то, что включение высоты в запросы позволяет стилю течь немного больше, в то время как включение высоты просто заставляет мой мобильный стиль (базовый стиль) включиться раньше.

В моем случае базовая стилизация - это простой столбец на мобильном телефоне с медиазапросами, которые выглядят примерно так:

$desktop-devices-large: "(min-height: 900px) and (max-height: 1080px) and (min-width: 1440px) and (max-width: 1920px)";
    $desktop-devices-medium: "(min-height: 768px) and (max-height: 900px) and (min-width: 1024px) and (max-width: 1440px)";
    $mobile-devices: "screen and (max-height: 760px) and (max-width: 760px)";

Я использую Sass для импорта запросов, так что шаблон обычно выглядит так:

.Intro { 
  @extend %section-default;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: flex-start;
  margin-top: 100vh;
  padding-left: $spacing-default;
  padding-right: $spacing-default;
  padding-bottom: $spacing-default;
  background-color: white;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)),
    url("/assets/images/intro-thumbnail.png");
  background-position: 72% 0%;
  background-size: cover;
  padding-top: 20%;    

@media #{$desktop-devices-large},
      #{$desktop-devices-medium} {
        justify-content: flex-start;
        padding-top: $spacing-double;
        background-position: 0% 0%;
        padding-left: $spacing-double;
        padding-right: $spacing-double;
        padding-bottom: $spacing-double;
      }
}

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