Как отлаживать CSS внутри различных медиазапросов с помощью инструментов Firebug и Chrome Developer? - PullRequest
Новая
       47

Как отлаживать CSS внутри различных медиазапросов с помощью инструментов Firebug и Chrome Developer?

10 голосов
/ 27 июля 2011

Как отладить CSS для ориентации: портрет в инструментах разработчика Chrome?

То, что я пишу внутри (orientation:portrait), не может редактироваться на лету из инструментов Firebug и Chrome Developer. Он всегда показывает нормальные свойства. 

/*normal styles here */
#wrap {
   width:1024px;
}
@media only screen and (orientation:portrait){
   /* portrait styles here */
   #wrap {
      width:768px;
   }
}

Ответы [ 4 ]

4 голосов
/ 01 августа 2011

"Браузер или устройство определяет ориентацию, слушая ширину и высоту окна. Если высота больше ширины, то окно находится в портретном режиме. Если ширина больше высоты, оно находится в альбомном режиме. «

Подробнее: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

Как правило, вам нужно изменить размер окна браузера, чтобы ориентация css вступила в силу.

Если вы откроете firebug в окне браузера, т.е. Firebug находится внизу, высота окна браузера изменяется, в результате чего ориентация становится альбомной, и вы теряете свои портретные стили. Для обоих инструментов разработчика Firebug и Chrome попробуйте запустить инструменты в их собственном окне, чтобы размер вашего браузера не изменился.

PS. Я бы использовал Firebug для этого вида редактирования, потому что вы можете ясно видеть, как изменяется css при изменении размера браузера.

2 голосов
/ 12 декабря 2011

С недавних пор (Chrome 17) Chrome DevTools отображает контекст медиазапроса, влияющий на каждое соответствующее правило CSS (если оно есть).Хотя текущая реализация не обновляет стили изменений оценки медиазапросов (необходимо повторно выбрать уязвимый узел), http://webkit.org/b/74292 отслеживает запрос для динамического обновления соответствующих правил CSS.

0 голосов
/ 08 ноября 2012

Наконец, теперь это возможно в адаптивном режиме Firefox 16.Проверьте видео Youtube здесь http://www.youtube.com/watch?v=t07cLJhJkjQ

enter image description here

0 голосов
/ 03 августа 2012

Как говорится выше, вы можете изменить размер окна вашего браузера, чтобы высота была больше ширины, чтобы медиа портрет был истинным.Вы можете использовать этот URL http://robnyman.github.com/matchmedia/, поэтому измените размер браузера, обновите эту страницу, и вы увидите, если обнаруживает истину для портрета.

...