Измерение ширины окна и применение стилей / альтернатива медиа запросам

Измерение ширины окна и применение стилей / альтернатива медиа запросам

Не знаю, как правильно начинать такие записи, когда тебя переполняет чувство радости, после того, как открыл очередной "велосипед". Другими словами, когда решил очень сложную задачу и очень доволен. Именно такое у меня сейчас чувство. А что же за задачу я решил? Давайте разбираться.

Из заголовка записи можно понять, что речь пойдет о медиа запросах. Да, о них мы немного поговорим. Такой блок есть в CSS3 - довольно обширный. Но сегодня мы затронем только одно свойство:

@media screen and (max-width:500px) {
	.class {color:#000;}
}

Это свойство говорит нам, что если ширина области просмотра (для конкретного устройства - screen - монитор) меньше 500px, то следует применить определенные стили к определенным классам (или id). И это очень хорошее нововведение в css3.

Однако, когда решаются довольно точные задачи при соблюдении кроссбраузерности (одинаковом отображении в разных версиях браузеров) возникает ряд проблем. Разные браузеры по-разному рассчитывают ширину области просмотра (при наличии полосы прокрутки). Чтобы понять разницу, сделаем простой эксперимент. Наш код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Блоки div одинаковой высоты / javascript</title>
<style>
body {
	margin:0;
	padding:0;
}
@media screen and (max-width:500px) {
	.class {margin-top:52px;}
}
</style>
</head>
<body >
<div style="width:298px; border:1px solid green; height:50px; position:absolute;"></div>
<div class="class" style="float:right; width:200px; height:50px; border:1px solid red;"></div>
</body>
</html>
 

Результат такой:

Измерение ширины окна и применение стилей / альтернатива медиа запросам

Теперь начнем сжимать окно браузера, пока блоки не наедут друг на друга. Но этого не произойдет, так как сработает наш медиа запрос, который опустит правый блок вниз:

Измерение ширины окна и применение стилей / альтернатива медиа запросам

Результат отличный, во всех браузерах одинаковый. Теперь немного изменим наш исходный код, добавив в стиль body высоту 10 000 px:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Блоки div одинаковой высоты / javascript</title>
<style>
body {
	margin:0;
	padding:0;
	height:10000px;
}
@media screen and (max-width:500px) {
	.class {margin-top:52px;}
}
</style>
</head>
<body >
<div style="width:298px; border:1px solid green; height:50px; position:absolute;"></div>
<div class="class" style="float:right; width:200px; height:50px; border:1px solid red;"></div>
</body>
</html>
 

Появилась полоса прокрутки. Снова посмотрим результат в момент "наезжания" блоков. Смотрим в Google Chrome и Mozilla FireFox. В Google Chrome:

Измерение ширины окна и применение стилей / альтернатива медиа запросам

А теперь в Mozilla FireFox, равно как и в Opera и Internet Explorer:

Измерение ширины окна и применение стилей / альтернатива медиа запросам

Как мы видим, правый блок наехал на левый и падает только когда мы еще дальше сужаем браузер:

Измерение ширины окна и применение стилей / альтернатива медиа запросам

Происходит это потому, что Google Chrome рассчитывает видимую область без учета ширины скролла, а остальные браузеры с учетом ширины скролла.

На мой взгляд удобнее, как делает Google Chrome.

Однако, от этого не легче. Нужно искать решение, которое сможет избавить нас от этой проблемы (когда неизвестно будет появляться скролл или нет). Один из вариантов это jQuery - технология, которая недавно опять стала очень популярна.

Итак, суть метода: вычислять ширину браузера и когда она достигнет определенного значения (которое задается заранее), нужному нам элементу присваивать нужный нам класс.

Сделаем следующим образом. Добавим на страницу 2 div блока. Верхний - поменьше, нижний побольше. Верхний блок раскрасим в красный цвет. И напишем скрипт, который будет перекрашивать верхний блок в белый цвет, как только мы сузим окно браузера до размеров нижнего блока. Запутал? В картинках:

Имеем:

Измерение ширины окна и применение стилей / альтернатива медиа запросам

Надо:

Измерение ширины окна и применение стилей / альтернатива медиа запросам

Не буду мучать долгими объяснениями. Приведу лучше исходный код целиком:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $(window).resize(function() {
        var width = $(window).outerWidth();
        if (width < 300) {
            $("#abc").addClass("bca");
        } else {
            $("#abc").removeClass("bca");
        }
    });
 
	$(window).resize();
});
</script>
<style>
#abc {
	width:200px;
	height:100px;
	border:1px solid red;
}
.bca {
	background-color:red;
}
</style>
 </head>
 <body>
<div id="abc">
</div>
<div style="height:200px; width:291px; border:1px solid green;">
</div>
</body>
</html>

И отдельно наш скрипт:

$(function() {
    $(window).resize(function() {
        var width = $(window).outerWidth();
        if (width < 300) {
            $("#abc").addClass("bca");
        } else {
            $("#abc").removeClass("bca");
        }
    });
 
	$(window).resize();
});

Который говорит, что как только ширина браузера станет 300px и меньше, то элементу с id abc (#abc), нужно присвоить класс bca (.bca). Как только размер окна браузера начинает превышать 300px, класс bca (.bca) удаляется. Работает=)

Demo

04.04.17
Для просмотра сайта обновите браузер.