|
Сообщение от 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?
