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

Question

Нажав F12, я могу мгновенно изменять CSS-элементы в Chrome. не Тем не менее, я могу ввести @media экран и (макс-ширина) аналогична здесь:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Когда я нажимаю войти в него просто исчезает. Что я могу сделать для динамического добавления и удаления медиа-запросов?

Answer 1

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

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

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

Тогда просто написать CSS:

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

Answer 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> 

Answer 3

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

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

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