Медиа запросы css не работают: css — Медиа-запросы не работают — Вебджем.рф

Содержание

html — Не работает @media запрос

Вопрос задан 4 года 3 месяца назад

Изменён 2 месяца назад

Просмотрен 2k раз

Есть код, хочу добавить медиа-запрос с разрешением 992px. Смотрю через инспектор кода, но все как было, так и есть — стили медиа не применились. Помогите, в чем дело?

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700|Roboto:400,700" rel="stylesheet">
    <title>Layout</title>
</head>
<body>
<div>
        <a href=""><img src="img/logo.  png" alt=""></a>
    </div>
    <style>
    .logo {
    padding-top: 52px;
    }
    @media screen and (max-width: 992px) {
    .logo {
    display: block;
    margin: 0 auto;
    }
    }
    </style>
<!--мой код-->
</body>

html
css
css3
html5
media-queries

Все работает

.logo {
  display: inline-block;
  background: #000;
  height: 40px;
  width: 150px;
  color: #fff;
}

.logo:after {
  content: 'Больше 992px';
  display: inline-block;
}

@media screen and (max-width: 992px) {
  .logo {
    background: #00f;
  }
  .logo:after {
    content: 'Меньше 992px';
  }
}

<div></div>

А сам @media под нужным тегом виден в console? Если виден, но не применяется то, попробуй !important проставить, а лучше конечно без него обойтись каким-то другим образом.

Мне самому будет интересно узнать — каким. А лучше всего выложите скрин из console — возможно стили перекрываются.

@media screen and (max-width: 992px) {
    .logo {
    display: block !important;
    margin: 0 auto !important;
    }
    }

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Медиа запросы | CSS | CodeBasics

Для просмотра интернет-страниц используется множество устройств с различным размером и разрешений экрана: компьютеры, смартфоны, планшеты, ноутбуки и так далее. Такое количество устройств требует от разработчиков умение подстраивать свои страницы под разные вариации разрешений.

Один из способов изменить стили в зависимости от разрешения — использовании специальных CSS правил, которые срабатывают при выполнении заданных условий. Такими условиями могут быть:

Ширина или высота viewport
Горизонтальная или вертикальная ориентация экрана
Тип устройства

и другие.

В этом уроке узнаем о правиле @media и рассмотрим несколько стандартных вариантов применения. Задачей урока не является объяснить все тонкости работы с адаптивностью страниц, поэтому сосредоточимся на ключевых вещах.

Правило media

Все медиа запросы строятся по похожему шаблону и используют конструкцию @media:

@media (условие) {
  /* Правила */
}

Какие правила указываются внутри конструкции @media? Абсолютно любые! Думайте об этом, как о новом CSS файле, со своими селекторами, свойствами.

Например, для определённого условия нужно изменить цвет текста элементов с классом .text на чёрный. Тогда конструкция примет такой образ:

@media (условие) {
  .text {
    color: #000000;
  }
}

А какие бывают условия? Представим, что нужно изменить цвет текста, если ширина viewport меньше или равно 700 пикселей. Тогда указывается правило max-width: 700px. Очень похоже на обычное CSS правило, которое определит, что свойства должны отрабатывать, если ширина viewport 700 пикселей или меньше:

@media (max-width: 700px) {
  .text {
    color: #000000;
  }
}

С приходом мобильных телефонов остро возникла необходимость работы с тем, как пользователь держит телефон: вертикально или горизонтально. Когда пользователь держит телефон вертикально, то высота экрана больше, чем его ширина. При горизонтальном использовании наоборот — ширина больше высоты. Это требует правильного выстраивания блоков на странице, чтобы ей было удобно пользоваться из любого положения.

В медиа запросах есть специальное условие orientation, которое может иметь одно из двух значений:

portrait — портретная ориентация устройства. Высота экрана больше, чем его ширина
landscape — альбомная ориентация устройства. Высота экрана меньше, чем его ширина

Пусть для портрентной ориентации текст будет белым, а для альбомной чёрным:

@media (orientation: portrait) {
  .text {
    color: #ffffff;
  }
}
@media (orientation: landscape) {
  .text {
    color: #000000;
  }
}

Медиа запросы могут быть куда сложнее, и учитывать множество разных вариаций. В рамках одного урока это не описать, но вы уже познакомились с тем, как строятся медиа запросы, для чего они существуют и как добавить их в свой CSS файл

Задание

Добавьте белый цвет текста у параграфов с классом white-text-mobile для устройств с шириной экрана не больше 750 пикселей. Стили запишите в теге <style>

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

← Предыдущий

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

html — Почему мои медиа-запросы CSS3 не работают на мобильных устройствах?

спросил 11 лет, 1 месяц назад

Изменено 5 месяцев назад

Просмотрено 439 тысяч раз

В стилях.css я использую медиа-запросы, оба из которых используют вариант:

 /*--[Обычные стили CSS]----------------- -----------------*/
Только экран @media и (максимальная ширина: 767 пикселей) {
    /*--[Здесь идут мобильные стили]----------------------------*/
}

Размеры сайтов изменяются в соответствии с макетом, который мне нужен в обычном браузере (Safari, Firefox), когда я сжимаю окно, однако мобильный макет вообще не отображается на телефоне.

Вместо этого я просто вижу CSS по умолчанию.

Может ли кто-нибудь указать мне правильное направление?

html
css
медиа-запросы
мобильный сайт

Все три совета были полезными, но, похоже, мне нужно было добавить метатег:

Теперь он работает как на Android (2.2), так и на iPhone…

Не забудьте иметь стандартные объявления css выше медиа-запрос, иначе запрос тоже не будет работать.

 .edcar_letter{
    размер шрифта: 180 пикселей;
}
Экран @media и (максимальная ширина: 350 пикселей) {
    .edcar_letter{
        размер шрифта: 120 пикселей;
    }
}

Я подозреваю, что ключевое слово только может быть здесь проблемой. У меня нет проблем с использованием медиа-запросов, таких как:

@media screen и (max-width: 480px) { }

js javascript, но все еще не работает. если вы хотите, чтобы ваш медиа-запрос работал с этим файлом javascript, добавьте экран в строку медиа-запроса в css

вот пример:

 
<стиль>
     Экран @media и (max-width:900px) {}
     Экран @media и (минимальная ширина: 900 пикселей) и (максимальная ширина: 1200 пикселей) {}
     Экран @media и (min-width:1200px) {}

строка ссылки css такая же простая, как и строка выше.

Включение метатега, как показано ниже, может привести к тому, что браузер будет по-разному обрабатывать масштабирование окна просмотра.

Сегодня у меня была аналогичная ситуация. Медиа-запрос не сработал. Через некоторое время я обнаружил, что пробел после «и» отсутствует. Правильный медиа-запрос должен выглядеть так:

 @media screen и (max-width: 1024px) {}

Последовательный порядок кода CSS также имеет значение, например:

 @media(max-width:600px){
  .пример-текст {
     красный цвет;
   }
}
.пример-текст {
   цвет синий;
}

приведенный выше код не будет работать, так как выполненный заказ. Нужно написать следующее:

 .example-text{
   цвет синий;
}
@медиа (максимальная ширина: 600 пикселей) {
  .пример-текст {
     красный цвет;
   }
}

Всегда указывайте max-width и min-width в каких-либо единицах измерения, таких как px или rem. Это поняло это для меня. Если я напишу это без единицы и только числовое значение, браузер не сможет прочитать медиа-запросы. пример: это неправильно Только экран @media и (max-width:950) а также это верно Только экран @media и (max-width:950px)

Фрагмент кода OP явно использует правильную разметку комментариев, но CSS может ломаться прогрессивным образом — поэтому, если есть синтаксическая ошибка, все после этого, скорее всего, не удастся. Пару раз я полагался на надежные источники, которые предоставили неправильная разметка комментариев , которая сломала мою таблицу стилей. Поскольку OP предоставил лишь небольшую часть своего кода, я бы предложил следующее:

Убедитесь, что все ваши комментарии CSS используют эту разметку /* … */ — это правильный комментарий разметка для css в соответствии с MDN

Проверьте свой css с помощью линтера или безопасного онлайн-валидатора. Вот один из W3

Подробнее: Я пошел проверить последние рекомендуемые точки останова медиа-запросов из bootstrap 4 и в итоге скопировал шаблон прямо из их документов. Почти каждый блок кода был помечен комментариями в стиле javascript 9.0047 // , который сломал мой код — и дал мне только загадочные ошибки компиляции, с которыми можно было разобраться, что в то время вышло из головы и вызвало у меня печаль.

Текстовый редактор IntelliJ позволил мне комментировать определенные строки css в файле LESS, используя горячую клавишу ctrl+/, которая была отличной, за исключением , она вставляет // по умолчанию для нераспознанных типов файлов . Это не бесплатное ПО, и оно довольно распространено, поэтому я доверился ему и пошел с ним. Это сломало мой код. Существует меню настроек для обучения правильной разметке комментариев для каждого типа файла.

Недавно я тоже столкнулся с этой проблемой, и позже я узнал, что это было из-за того, что я не поставил пробел между и и ( . Это была ошибка

 @media screen and(max-width:768px){
}

Затем я изменил его на это, чтобы исправить

 Экран @media и (max-width:768px){
}

Это также может произойти, если уровень масштабирования браузера неверен. Масштаб окна вашего браузера должен быть 100%. В Chrome используйте Ctrl + 0 , чтобы сбросить уровень масштабирования.

Бросок еще один ответ в кольцо. Если вы пытаетесь использовать переменные CSS, то это тихо потерпит неудачу.

 Экран @media и (max-device-width: var(--breakpoint-small)) {}

Переменные CSS не работают в медиа-запросах (по задумке).

Странная причина, которую я никогда раньше не видел: если вы используете селектор «родительский > дочерний» вне медиа-запроса (в Firefox 69) это может нарушить медиа-запрос. Я не уверен, почему это происходит, но для моего сценария это не сработало…

 @media any {
    #ребенок { дисплей: нет; }
}

Но добавление родительского элемента в соответствии с каким-либо другим CSS дальше по странице, это работает…

 #parent > #child { display: none; }

Похоже, указание родителя не имеет значения, так как идентификатор очень специфичен и не должно быть никакой двусмысленности. Может быть, это ошибка в Firefox?

Я использую несколько методов в зависимости от. В той же таблице стилей я использую: @media (максимальная ширина: 450 пикселей), или для отдельных убедитесь, что у вас есть ссылка в заголовке правильно. Я просмотрел ваш fixmeup, и у вас есть запутанный массив ссылок на css. Он действует, как вы говорите, также на HTC Desire S.

 @media все и (максимальная ширина: 320 пикселей) и (минимальная ширина: 0 пикселей) {
  #контейнер {
    ширина: 100%;
  }
  стой {
    высота: 50%;
    ширина: 100%;
    выравнивание текста: по центру;
    маржа: 0;
  }
}
.имя пользователя {
  нижняя граница: 20px;
  поле сверху: 10px;
}

только из-за не опечатки у меня не работает @media screen и (max-width: 930px) требуют пробела между (and) и открывающей скобкой @media screen и (max-width: 930 пикселей)

Единственное исправление, которое вам нужно:

Просто возьмите все медиазапросы в конце файла .CSS

Работает, попробуйте

Важно, чтобы экран @media был в конце css

Для меня я указал max-height вместо max-width .

Если это ты, меняй !

 @media screen and (max-width: 350px) { // Не max-height
        .письмо{
            размер шрифта: 20 пикселей;
        }
    }

Для всех, у кого возникла такая же проблема, убедитесь, что вы действительно написали «120px», а не просто «120». Это была моя ошибка, и это сводило меня с ума.

Ну, в моем случае px после значения ширины отсутствовало… Интересно, что валидатор W3C даже не заметил эту ошибку, просто молча проигнорировал определение.

У меня была такая же проблема, и оказалось, что мои медиа-запросы были в неправильном порядке. Они должны быть определены от самого широкого до самого маленького в CSS

адаптивный дизайн — CSS Media Query не будет работать

спросил 9 лет, 3 месяца назад

Изменено 1 год, 7 месяцев назад

Просмотрено 114 тысяч раз

Я продолжаю пытаться выполнить медиа-запрос в моем документе CSS, делая что-то вроде:

 Экран @media и (max-device-width: 480px) { /*css здесь*/}

, но это не сработает, когда я проверю это на iPhone. Я пытался изменить размеры и использовать портретную/пейзажную функцию, но все равно ничего. Что я делаю не так?

css
адаптивный дизайн

Убедитесь, что у вас есть

в заголовке вашего документа

Я всегда вызываю свой, когда связываю CSS в заголовке HTML.

Пример текущей страницы, над которой я работаю:

Это выбирает документ CSS, который будет загружаться с самого начала, вместо выбора стилей после загрузки документа CSS (уменьшает количество HTTP-запросов). ширина устройства с максимальной шириной .

это образец медиа-запроса css

 /***************************************** *************************************************
меньше 980
******************************************************* *************************************/
Экран @media и (максимальная ширина: 980 пикселей) {
твой css здесь
}
/********************************************************* ****************************************
меньше 650
******************************************************* *************************************/
Экран @media и (максимальная ширина: 650 пикселей) {
твой css здесь
}
/********************************************************* ****************************************
меньше 560
******************************************************* *************************************/
Экран @media и (максимальная ширина: 480 пикселей) {
твой css здесь
}

Трудно понять, так как вы не предоставили код.

Медиа запросы css не работают: css — Медиа-запросы не работают

html — Не работает @media запрос

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Медиа запросы | CSS | CodeBasics

Правило media

Задание

html — Почему мои медиа-запросы CSS3 не работают на мобильных устройствах?

адаптивный дизайн — CSS Media Query не будет работать

Добавить комментарий Отменить ответ

Рубрики