Как в CSS3 использовать одновременно max-width и min-height в рамках media-запроса?

Question

У меня возникли проблемы с использованием media-запроса.

Вот мой код:

@media (max-width: 1441px) and (min-height: 899px) {
  header {
    .container {
      max-width: calc(54vw + 54vh);
    }
  }
}

Хочу установить отдельное свойство max-width для контейнера на экранах 1440х900, но по каким-то причинам данный media-запрос не работает.

У меня есть предположение, что браузер округляет значения max-width и min-height, из-за чего код перестаёт работать. К такому выводу я пришёл из-за того, что со значениями 1500px и 800px всё работает как нужно, но несмотря на это, я хочу всё же добиться работы с изначальными значениями - 1441px и 899px, а не городить какие-то "костыли".

Что для этого нужно сделать? Как заставить заработать такой запрос?

Я не забыл в html прописать <meta name="viewport" content="width=device-width, initial-scale=1.0">

изм: Сейчас попробовал такое решение:

@media (device-aspect-ratio: 8 / 5) {
  header {
    .container {
      max-width: calc(54vw + 54vh);
    }
  }
}

Это работает, но параметр device-aspect-ratio признан устаревшим и его советуют не использовать, так что он не решит мою проблему.

Вот скриншот как я определяю подключились ли стили из media-запроса (выделил красным).

Я всё проверил, файл ТОЧНО подключён и его ТОЧНО ничего не перебивает.

* {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  border: none;
  outline: none;
  line-height: 1;
}

header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(3vw + 3vh);
  position: fixed;
  z-index: 10;
  top: 0;
  background-color: rgba(20, 20, 20, 0.5);
}

header .container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: calc(56vw + 56vh);
}

header .container .support-blocks,
header .container .support-blocks .form-wrapper-container,
header .container .support-blocks .logo-block {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 100%;
  margin: 0 calc(1.5vw + 1.5vh) 0 calc(3vw + 3vh);
}

header .container .support-blocks .logo-block {
  margin: 0;
  margin-right: calc(1.5vw + 1.5vh);
}

header .container .support-blocks .logo-block img {
  width: calc(2.5vw + 2.5vh);
  height: calc(2.5vw + 2.5vh);
  margin-right: calc(0.25vw + 0.25vh);
}

header .container .support-blocks .logo-block a {
  font-size: calc(1.5vw + 1.5vh);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

header .container .support-blocks .form-wrapper-container {
  margin: 0;
}

header .container .support-blocks .form-wrapper-container .form-block {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 100%;
}

header .container .support-blocks .form-wrapper-container .form-block .search-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  width: fit-content;
  height: fit-content;
  position: relative;
}

header .container .support-blocks .form-wrapper-container .form-block .search-wrapper .search {
  width: calc(9.2vw + 9.2vh);
  height: calc(1.6vw + 1.6vh);
  font-size: calc(0.75vw + 0.75vh);
  font-weight: 350;
  padding: 0 calc(0.5vw + 0.5vh) 0 calc(1.55vw + 1.55vh);
  border-radius: calc(0.25vw + 0.25vh);
  background-color: rgba(255, 255, 255, 0.7);
}

header .container .support-blocks .form-wrapper-container .form-block .search-wrapper .search::placeholder {
  color: rgba(10, 10, 10, 0.5);
}

header .container .support-blocks .form-wrapper-container .form-block .search-wrapper .search-icon {
  width: calc(1.2vw + 1.2vh);
  height: fit-content;
  position: absolute;
  left: calc(0.15vw + 0.15vh);
}

header .container .support-blocks .form-wrapper-container .form-block .button {
  width: calc(1.6vw + 1.6vh);
  height: calc(1.6vw + 1.6vh);
  margin-left: calc(0.35vw + 0.35vh);
  border: calc(0.1vw + 0.1vh) solid transparent;
  border-radius: calc(0.25vw + 0.25vh);
  background-color: rgba(255, 255, 255, 0.7);
  transition-property: box-shadow, background-color;
  transition-duration: 400ms, 600ms;
}

header .container .support-blocks .form-wrapper-container .form-block .button:hover {
  box-shadow: 0 0 calc(0.5vw + 0.5vh) rgb(255, 255, 255);
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

header .container .support-blocks .form-wrapper-container .form-block #lang-button {
  background-image: url("../../../img/lang.png");
  background-size: cover;
  background-repeat: no-repeat;
}

header .container .support-blocks .form-wrapper-container .form-block #help-button {
  background-image: url("../../../img/help.png");
  background-size: cover;
  background-repeat: no-repeat;
}

header .container .navigation-blocks,
header .container .navigation-blocks .main-block {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 100%;
  margin: 0 calc(3vw + 3vh) 0 calc(1.5vw + 1.5vh);
}

header .container .navigation-blocks .main-block {
  margin: 0;
  padding: 0 calc(0.69vw + 0.69vh);
  transition-property: background-color;
  transition-duration: 800ms;
}

header .container .navigation-blocks .main-block:hover {
  background-color: rgba(10, 10, 10, 0.75);
}

header .container .navigation-blocks .main-block a {
  font-size: calc(0.92vw + 0.92vh);
  font-weight: 350;
  color: rgb(255, 255, 255);
  transition-property: color;
  transition-duration: 400ms;
}

header .container .navigation-blocks .main-block a:hover {
  color: rgb(255, 255, 0);
  cursor: pointer;
}

@media (max-width: 1441px) and (min-height: 899px) {
  header .container {
    max-width: calc(46vw + 46vh);
    background-color: rgba(100, 20, 20, 0.75);
  }
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/style.css">
  <title>Home | Главная</title>
</head>

<body id="index-body">
  <header>
    <div class="container">
      <div class="support-blocks">
        <div class="logo-block">
          <a href="#" target="_self"><i>Text</i></a>
        </div>
        <div class="form-wrapper-container">
          <form class="form-block" action="#" method="get">
            <div class="search-wrapper">
              <input class="search" type="search" placeholder="Find something..." maxlength="21" required>
            </div>
            <input class="button" id="lang-button" type="button" value="">
            <input class="button" id="help-button" type="button" title="Have a question?" value="">
          </form>
        </div>
      </div>
      <nav class="navigation-blocks">
        <span class="main-block"><a href="#" target="_self">Home</a></span>
        <span class="main-block"><a href="#" target="_self">Catalog</a></span>
        <span class="main-block"><a href="#" target="_self">Account</a></span>
      </nav>
    </div>
  </header>
</body>

</html>

Answer 1

Вы что-то не то в стилях задаете. Как вы вообще собираетесь понять, работет оно у вас или нет через параметр max-width: calc(54vw + 54vh); (тут написано что-то непонятное... если вы оперируете px)? Если .container это <div> элемент, то он имеет блочную структуру по умолчанию и растягиваеться на всю ширину экрана.

body {
  margin: 0;
  padding: 0;
}

header .container {
  background-color: #f00;
  min-height: 50px;
}

@media (max-width: 1441px) and (min-height: 899px) {
  header .container {
    background-color: #0f0;
  }
}

<header>
  <div class="container"></div>
</header>

БЛОГ НА HUSL

Как в CSS3 использовать одновременно max-width и min-height в рамках media-запроса?

Ответы (1 шт):