Здравствуйте! Помогите с медиазапросом, пожалуйста! Есть код...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Стили</title>
<style type="text/css">
.h { color: red; }
@media only screen and (max-width: 500px) { .h { color: blue; } }
</style>
</head>
<body>
<H1 class="h">Hello, world!</H1>
</body>
</html>
Если max-width: 500, то запрос работает ВКЛЮЧИТЕЛЬНО (включает 500 - надпись синим цветом). Если 499, то НЕ ВКЛЮЧИТЕЛЬНО (на размере экрана 499 надпись красным цветом). Почему так?
P.S. как здесь выяснили, проблема заключается в неправильном округлении браузерами пикселей. И решение пока что видится только одно - использовать одно направление - либо max-width, либо min-width. Но если используется какой-либо фреймворк - типа Bootstrap, то придется выбирать именно min-width, ведь в Bootstrap'e сетка написана с использованием min-width.
Я начал начал так делать. И скажу вам, что в некоторых проектах верстка очень сильно усложняется! Может, есть JS код, который решает данную проблему?
Простой
Средний
Простой