Я пытаюсь сделать что-то, что, на мой взгляд, должно быть довольно простым, но я не нашел прямого объяснения решения.
Я создаю адаптивный веб-сайт, который сначала будет мобильным (по умолчанию ширина 320 пикселей). При таком небольшом разрешении сайт представляет собой один столбец, и я рад позволить каждой отдельной «коробке» расширяться или сжиматься до естественной высоты содержимого, содержащегося внутри.
Однако при больших разрешениях, когда сайт расширяется до трех столбцов, я хочу добавить небольшую функцию Javascript, чтобы выровнять высоты полей каждого столбца. Функция, о которой я говорю, будет выглядеть примерно так:
jQuery(document).ready(function() {
setHeight('#inner-footer .widget-area');
});
var maxHeight = 0;
function setHeight(column) {
//Get all the element with class = col
column = $(column);
//Loop all the column
column.each(function() {
//Store the highest value
if($(this).height() > maxHeight) {
maxHeight = $(this).height();;
}
});
//Set the height
column.height(maxHeight);
}
Я нашел разные способы сделать то, о чем я говорю.
- Я могу использовать функцию загрузки "modernizr" (формально yesnope.js).
- Использование пользовательской функции, включающей функцию «isMedia» Николаса Закаса, как описано в этой ссылке Javascript для конкретных медиа или
- пользовательская функция JavaScript, использующая переменную «screenWidth», как в
var screenWidth = (screen.width < 768) ? true : false;
как описано в Медиа-запросы в реальном мире
С моим ограниченным знанием javascript, я не смог написать код, чтобы заставить любой из этих подходов работать для моего сценария. Может ли кто-нибудь помочь мне здесь?
У меня нет особых предпочтений в подходе, я просто хочу, чтобы он работал через браузер и т. Д. Я чувствую, что подход modernizr является наиболее надежным и стабильным способом сделать эту работу в наибольшем количестве случаи использования, но я не совсем уверен в этом. Я никогда не изменял Modernizr, поэтому я не уверен, как написать и куда поместить пользовательскую функцию загрузки.
У кого-нибудь есть мысли и конкретный код для модернизирующего подхода или каких-либо других решений (или чего-то еще)? Я очень ценю помощь.