Я написал этот код в CSS: < /p>
/* Extra small devices (phones, 480px and down) */
@media only screen and (max-width: 480px) {
body {
background-color: red;
}
}
/* Small devices (portrait tablets and large phones, 481px up to 769px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
body {
background-color: blue;
}
}
/* Medium devices (landscape tablets, 769px up to 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
body {
background-color: green;
}
}
/* Large devices (large laptops and desktops, 1025px up 5o 1440px) */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
body {
background-color: blueviolet;
}
}
< /code>
При тестировании отзывчивости этого кода в моем браузере цвет фоновый цвет переключается на цвет по умолчанию для одного пикселя, прежде чем перейти к определению следующего стиля с предстоящим пикселем. 480px "src =" https://i.sstatic.net/ityfsc0j.png "/>
Когда ширина экрана ровно 480px, цвет фона станет белым (цвет по умолчанию):
Фон становится синим, когда ширина увеличивается до 481px:
Какова проблема здесь? Почему это внезапно становится белым? Есть ли способ это исправить?
Подробнее здесь: https://stackoverflow.com/questions/796 ... ng-a-pixel
