Изменить стили при размере окна меньше или равно (пикселей)

Question

Я пытаюсь сделать чтобы стили блока my_media изменились если размер окна меньше или равняется 1199px

Сделал как приведено в примере, но на окне 1199px стили не изменяются, они начинают изменятся только на окне в 1198 и менее пикселей.

Мне же нужно чтобы стили изменялись только при размере окна 1199 и менее пикселей.

Буду очень благодарен за помощь!

.my_media {
  margin-top: 120px;
  background: #fff;
  color:#000;
}

@media only screen and (max-width: 1199px)  {
  .my_media {
    margin-top: 150px;
    background: green;
    color:#fff;
  }
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
    <header class="container p-3 fixed-top shadow-sm" style="height:120px;">HEADER</header>
    
    <div class="container my_media">
      <div class="row">
        <h1>Hello, world!</h1>
      </div>
    <div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  </body>
</html>

Answer 1

Добавьте к медиазапросу дробную часть

.my_media {
  margin-top: 120px;
  background: #fff;
  color:#000;
}

@media only screen and (max-width: 1199.98px)  {
  .my_media {
    margin-top: 150px;
    background: green;
    color:#fff;
  }
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    
    <header class="container p-3 fixed-top shadow-sm" style="height:120px;">HEADER</header>
    
    <div class="container my_media">
      <div class="row">
        <h1>Hello, world!</h1>
      </div>
    <div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  </body>
</html>

Answer 2

Зачем вычитать .02px? В настоящее время браузеры не поддерживают контекстные запросы диапазона, поэтому мы обходим ограничения префиксы min- и max- и области просмотра с дробной шириной (что может происходить при определенных условиях на высоких -dpi устройства, например), используя значения с более высокой точностью.

Из документации Bootstrap 5

Зачем вычитать дробные числа при @media

БЛОГ НА HUSL

Изменить стили при размере окна меньше или равно (пикселей)

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