Why are @media queries not working in Bootstrap 4?

I

Ilya Filonov2019-05-22 03:48:05

css

Ilya Filonov, 2019-05-22 03:48:05

I am using Bootstrap 4.3.1. All links have been shortened so as not to clog the code.
Here is the html code

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Пример</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link Бутстрап 4.3.1>
  <link фонт асоме>
  <link анимэйт>
  <link главные стили.css>
  <link файл с медиа-запросами.css>
</head>
<body>
  <header>
    <div class="container-fluid">
      <div class="row">
        <div class="col-2 offset-1">
          <h1>Привет</h1>
        </div>
      </div>
    </div>	
  </header>

In styles, set the font-size in pixels for the html tag. The rest of the font-size was set in rem.

html {
  font-size: 10px;
  line-height: 10px;
}
h1 {
  color: #2bce6c;
  font: bold 5rem/5rem 'Open Sans', sans-serif;
  margin-top: 50px;
  margin-bottom: 5px;
}

Accordingly, in the file with media queries, I simply interrupt the font-size of the html tag.

// Небольших устройств (альбомной телефоны, 544px и вверх)  
@media (min-width: 544px) {
  html {
    font-size: 3px;
  }	
}
// Устройствах среднего (планшеты, 768px и выше)  
@media (min-width: 768px) {
  html {
    font-size: 3px;
  }
}

HERE IS THE FULL CODE https://codepen.io/gbreadman13/pen/zQPbLV
All relative rems must change. Or not?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Sergey delphinpro, 2019-05-22
@gbreadman13

I certainly won't poke around in your sheet of irrelevant code. It's up to you to isolate the problem and make a short sandbox.
In addition, there are no media queries in your code at all. Your medai.css is obviously not available.
In addition, the sandbox is designed incorrectly, there are no head tags and everything inside, and external resources are connected through the foam settings.
Just to show that everything works as it should.
https://codepen.io/anon/pen/zQPQYz