Показать сообщение отдельно
  #15 (permalink)  
Старый 29.11.2014, 03:30
Новичок на форуме
Отправить личное сообщение для learner Посмотреть профиль Найти все сообщения от learner
 
Регистрация: 15.11.2014
Сообщений: 9

Сообщение от krasovsky
Я лично уже запутался.
Смотрите, есть nav, который располагается обычно, то есть горизонтально, его ширина 100% ширины #wrap и, разумеется, для адаптивного дизайна я использую медиа-запросы. При ширине экрана 320px я его переворачиваю на 90 градусов и при помощи fixed прижимаю к верхнему левому углу экрана и он становится узкой полосой параллельно скроллингу, просто такое дизайнерское решение.
Задача была, и которая благодаря Вам уже решена, чтобы nav, при ширине окна 320рх и меньше, в качестве своей ширины принимал высоту окна, тогда он будет резиновым на любом устройстве, с любой высотой viewport.
Вот код устанавливающий nav в положение параллельно скроллингу:
@media (max-width: 320px) {
#nav { 
                height: 20px;
                position: fixed;
                top: 0;
                left: 0;
                transform-origin: 0 0;
                transform: translateX(20px) rotate(90deg);
            }
}

Вот скрипт, отредактированный Вами, который делает его резиновым в этом перевёрнутом положении:
window.onload = function(){
	    var div = document.getElementById("nav");
	    if (window.innerWidth <= 320){
	        div.style.width = window.innerHeight + "px";	    }
	}
window.onresize = window.onload;

window.onresize = window.onload; Эта строка, делает nav резиновым при ресайзе окна по высоте (только по высоте, ширина 320рх!) без перезагрузки страницы. Осталось только сделать так, чтобы при ресайзе окна по ширине с 321рх и больше, nav, за свою ширину снова принял своё старое значение ширины, а именно, 100% ширины #wrap.
Я ведь, только при ширине 320рх и меньше его переворачиваю, а при 321рх и больше действуют старые правила, где он горизонтальный и значение высоты окна мне уже не нужно.
Как я понимаю, это условие должно выглядеть так:
if (window.innerWidth > 320) {
	        div.style.width = снова равна 100% ширине #wrap; 
	    }

А я, как Вы знаете, мало что пока понимаю в этом вопросе.
снова равна 100% ширине #wrap, как вот такую строку, или строку с более грамотно сформулированной задачей, прописать на JS?

Последний раз редактировалось learner, 29.11.2014 в 04:09.
Ответить с цитированием