Нажав F12, я могу мгновенно изменить CSS элементов в Chrome. Однако я не могу ввести экран @media и (max-width), как здесь:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Когда я нажимаю кнопку ввода, он просто исчезает. Что я могу сделать для динамического добавления и удаления медиа-запросов?
Когда вы редактируете стили для определенного элемента в инспекторе, вы как бы редактируете атрибут inline style: вы можете размещать объявления свойств, такие как color: red, в своем примере. Это даже отражается в самой визуализации DOM при редактировании стилей элементов. Запросы к медиа не относятся к встроенным стилям, они принадлежат правилам @media, которые отображаются только в правильной таблице стилей.
В Chrome вам нужно будет отредактировать таблицу стилей инспекторов напрямую, чтобы включить ваши медиа-запросы. Вы можете связаться с ним, перейдя на панель "Источники" и выбрав таблицу стилей-указателей.
Так как это связано с написанием CSS, вам нужно будет выбрать элемент. Вы можете (обычно) получить уникальный селектор CSS для выбранного вами элемента, щелкнув его правой кнопкой мыши на панели "Элементы" и выбрав "Копировать CSS-путь".
Затем просто напишите свой CSS:
@media screen and (max-width: 300px) {
/* selector for your element */ { color: red; }
}
Вы всегда можете добавить 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>
Вы можете использовать новое правило стиля. Нажмите на символ плюс (+) помимо .cls.
и тогда вы увидите, что он генерирует новый класс. Теперь нажмите на таблицу стилей инспектора.
Вы будете перенаправлены на вкладку Sources с почти пустой таблицей стилей. Теперь вы можете добавить туда Media Queries.
У меня была та же проблема и, наконец, выяснилось, что когда я входил, например:
@media (max-width: 767px)
.col-sm-3 {
width: 75%;
}
размер экрана на самом деле был больше 767 пикселей. Поэтому, когда я нажал кнопку ввода, он исчез и, казалось, не работал. Но я понял, что когда я настраивал размер экрана моего браузера ниже 768 пикселей, я видел медиа-запрос в стилях.