Введите CSS-запросы в инструменты разработчика Chrome

Ответ 1

Когда вы редактируете стили для определенного элемента в инспекторе, вы как бы редактируете атрибут inline style: вы можете размещать объявления свойств, такие как color: red, в своем примере. Это даже отражается в самой визуализации DOM при редактировании стилей элементов. Запросы к медиа не относятся к встроенным стилям, они принадлежат правилам @media, которые отображаются только в правильной таблице стилей.

В Chrome вам нужно будет отредактировать таблицу стилей инспекторов напрямую, чтобы включить ваши медиа-запросы. Вы можете связаться с ним, перейдя на панель "Источники" и выбрав таблицу стилей-указателей.

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

Затем просто напишите свой CSS:

@media screen and (max-width: 300px) {
    /* selector for your element */ { color: red; }
}

Ответ 2

Вы всегда можете добавить CSS в теги стиля в разделе главы. Просто отредактируйте HTML, щелкнув правой кнопкой мыши на html и выберите "Редактировать как HTML". Например,

<style>
    @media screen and (min-width: 0px) and (max-width: 400px) {
        body {
            background-color: red;
        }
    }
    @media screen and (min-width: 401px) and (max-width: 599px) {
        body {
            background-color: green;
        }
    }
    @media screen and (min-width: 600px) {
        body {
            background-color: blue;
        }
    }
</style>

Ответ 3

Вы можете использовать новое правило стиля. Нажмите на символ плюс (+) помимо .cls.

и тогда вы увидите, что он генерирует новый класс. Теперь нажмите на таблицу стилей инспектора.

Вы будете перенаправлены на вкладку Sources с почти пустой таблицей стилей. Теперь вы можете добавить туда Media Queries.

Ответ 4

У меня была та же проблема и, наконец, выяснилось, что когда я входил, например:

@media (max-width: 767px)
.col-sm-3 {
  width: 75%;
}

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