Media query проблем в Mozilla


1

Здравейте :)

Ползвам тези media queries:

*{margin:0;padding: 0;}

@media screen and (max-width: 480px){ body{background:red;} }

@media screen and (min-width : 481px) and (max-width: 603px){ body{background:yellow;} }

@media screen and (min-width : 604px) and (max-width:734px){ body{background:green;} } @media screen and (min-width : 735px) and (max-width: 991px){ body{background:tomato;} } @media only screen and (min-width : 992px){ body{background:Aero;} } @media only screen and (min-width : 1200px){ body{background:pink;} }

В Mozilla  ми прави следния проблем: при max-width: 480px например ми се сменя цвета за следващото media queries ,на 462 px  за другите media queries прави пак същото някъде  около 20 px при обявения размер и ми се сменя. Аз съм направила за всеки размер да се сменя цвета на background- а с тестови цели. Тествах и в Chrome  този проблем го няма. Как да се справя с него и пропускам ли нещо?




Отговори



1
Здравей, нещо не мога да ти схвана въпроса. Как определяш пикселите във Firefox? По принцип се държи коректно. Това което забелязах до тук като грешка е един цвят "Aero", във Visual Studio Code не ми излиза такъв цвят. Сравнявам едновременно с ширината на Firefox и Chrome абсолютно по един и същи начин се държат и двата браузъра.

от venelingp (1371 точки)


1
Проблемът, който искам да представя е следния. В Mozilla при resize на прозореца, трябва да се сменя цвета на body при съответното media query, но например при @media screen and (min-width : 481px) and (max-width: 603px) цвета на body става yellow доста преди 481 px. В Chrome нямам такъв проблем ;(

от maria11 (25 точки)

0
Аз разбрах точно какво искаш да направиш. Но нали ти казвам, че при мен се държи CSS-a по един и същи начин и на Crome, Opera и Firefox.

от venelingp (1371 точки)