如何从水平反转到垂直(移动视图)

Question

试图反转移动设备的视图，但不知道应该在哪里进行更改。从YouTube课程中获得代码，并为我的项目更改了代码。当在手机上打开时，我想将左侧(文本(移到顶部，将右侧(图像(移到底部。我在学习，所以请不要对我评价太高！

let zSpacing = -1000,
lastPos = zSpacing / 5,
$frames = document.getElementsByClassName('frame'),
frames = Array.from($frames),
zVals = []
window.onscroll = function() {
let top = document.documentElement.scrollTop,
delta = lastPos - top
lastPos = top
frames.forEach(function(n, i) {
zVals.push((i * zSpacing) + zSpacing)
zVals[i] += delta * -4
let frame = frames[i],
transform = `translateZ(${zVals[i]}px)`,
opacity = zVals[i] < Math.abs(zSpacing) / 1.9 ? 1 : 0
frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity}`)
})
}
window.scrollTo(0, 1)

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
:root {
--index: calc(1vw + 1vh);
--gutter: 30px;
--small-side: 16;
--big-side: 26;
--depth: 1800px;
--transition: .75s cubic-bezier(.075, .5, 0, 1);
}
body {
background-color: #000;
color: #fff;
font-size: calc(var(--index) * .8);
font-weight: 300;
line-height: 1.75;
height: var(--depth);
}
.container {
width: 100%;
height: 100%;
position: fixed;
perspective: 1500px;
}
.gallery {
transform-style: preserve-3d;
height: 100%;
}
.frame {
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition), opacity .75s ease;
will-change: transform;
transform-style: preserve-3d;
}
.frame-media {
position: relative;
width: calc(var(--index) * var(--big-side));
height: calc(var(--index) * var(--small-side));
background-position: center;
background-size: cover;
background-color: orange;
}
.frame-media_right {
left: calc(var(--big-side) / 2 * var(--index) + var(--gutter));
}
.frame-bg {
background-color: rgba(0, 0, 0, .87);
}
.text-left>* {
position: relative;
right: 25%;
}
@media screen and (max-width: 479px) {}

<div class="container">
<section class="gallery">
<div class="frame frame_bg">
<div class="frame__content text-left text-up">
<h2>hello hello hello hello</h2>
<div class="frame-media frame-media_right frame-media_down"></div>
</div>
</div>
<div class="frame">
2
</div>
<div class="frame">
3
</div>
</section>
</div>

Answer 1

您的代码需要大量调整，但我不会这么做。相反，既然你正在学习，我将简单地向你解释如何做出响应式设计。

1-它从您的HMTL结构开始。把你的元素按顺序排列，记住当它从水平到垂直时，它会根据你的HTML顺序发生。

2-将父display设置为flex，row direction用于flex。

3-为移动设备添加您的media query，并在其中将父flex-direction设置为column。

就是这样。

.container {
display: flex;
justify-content: center;
align-items: center;

}
.container div, h2 {
height: 100px;
width: 200px;
border: 1px solid red;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 700px) {
.container {
flex-direction: column;
}
}

<div class="container">
<div class="div">div1</div>
<h2 class="text">some text</h2>
<div class="div">div2</div>
<div class="div">div3</div>
</div>