0
 body, html {
     margin: 0;
     padding: 0;

 }
 #header {
    border-top: 1px solid transparent;
     max-width: 100%;
     height: 100px;
     background-color: blue;
 }
 #container {
     max-width: 100%;
     height: 700px;
     background-color: red;
 }
 .block1 {
     margin: 25px 0 0 100px;
     width: 700px;
     height: 25px;
     background-color: yellow;
 }


@media only screen and (max-width: 375px) {
    .block1 {
        margin-left: 25px;
        width: 200px;
    }
} 


<html>
    <body>
        <div id="header">
            <div class="block1"></div>
        </div>
        <div id="container"></div>
    </body>
    </html>


Не срабатывает media-query для block1. В чем проблема? Как это решить?

2
  • 4
    375 чего?) (пс: добавьте px)
    – meine
    21 сен 2019 в 10:31
  • @meine исправил. Все равно не работает
    – JustLearn
    23 сен 2019 в 18:32

1 ответ 1

0

Все работает - запустите здесь и поизменяйте размер

body, html {
     margin: 0;
     padding: 0;

 }
 #header {
    border-top: 1px solid transparent;
     max-width: 100%;
     height: 100px;
     background-color: blue;
 }
 #container {
     max-width: 100%;
     height: 700px;
     background-color: red;
 }
 .block1 {
     margin: 25px 0 0 100px;
     width: 700px;
     height: 25px;
     background-color: yellow;
 }


@media only screen and (max-width: 375px) {
    .block1 {
        margin-left: 25px;
        width: 200px;
    }
} 
<html>
    <body>
        <div id="header">
            <div class="block1">12345</div>
        </div>
        <div id="container"></div>
    </body>
    </html>

Перед: введите сюда описание изображения

После: введите сюда описание изображения

9
  • Я изменил ширину окна меньше чем на 375px, но block1 не стал по ширине равным 200px и margin-left не уменьшился до 25px
    – JustLearn
    23 сен 2019 в 18:48
  • У меня не работает :(
    – JustLearn
    23 сен 2019 в 18:49
  • Может быть надо что-то установить для того, чтобы media queries работали? Я не понимаю. На двух устройствах запускаю не работает.
    – JustLearn
    23 сен 2019 в 18:54
  • Запустил на десктопе в Firefox, Crome, Opera и IE11 - все работает. Смотрите, что у Вас с компом/браузером.
    – Coder
    23 сен 2019 в 19:00
  • 1
    В хроме, при таких моментах, нажимаете F12 и Ctrl+Shit+M - и смотрите в разных мобильных разрешениях.
    – Coder
    23 сен 2019 в 19:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.