我已经建立了一个页面,其中包含几个以视频为背景的部分,每当用户滚动时,每个不同部分都会有一个滚动快照。
但是在移动设备上,我希望用户水平滚动而不是垂直滚动。我知道 scrollsnap 的诀窍是设置 type: x 强制,但要让它真正工作我需要改变我的页面布局,而不是
body = 500vh * 100vw 在桌面上(100vh 和 100vw 各有 5 段)
它成为了 :
身体 = 100vh * 500vw 在移动设备上
有没有办法通过媒体查询以这种方式改变布局?
html,body{ margin:0; padding:0; background-color: #232323; }
.text_id {
color: #fff;
font-size:calc(12px + 1.8vw);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
text-align: center;
}
.centering_container, .centering_container2, .centering_container3, .centering_container4, .centering_container5 {
z-index: -1;
height:100%;
width:100%;
overflow:hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
#wrapper{
position: relative;
height: 100vh;
overflow: hidden;
z-index: 3;
}
#featured {
position: absolute;
z-index: 2;
width: calc(100vh * (1920 / 1080)); /* video width / height */
height: calc(100vw * (1080 / 1920)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wrapper2{
position: relative;
height: 100vh;
overflow: hidden;
z-index: 2;
}
#featured2{
position: absolute;
z-index: 3;
width: calc(100vh * (1620 / 1080)); /* video width / height */
height: calc(100vw * (1080 / 1620)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wrapper3 {
position: relative;
height: 100vh;
overflow: hidden;
z-index: 2;
}
#featured3 {
position: absolute;
z-index: 2;
width: calc(100vh * (1920 / 1080)); /* video width / height */
height: calc(100vw * (1080 / 1920)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wrapper4 {
position: relative;
height: 100vh;
overflow: hidden;
z-index: 4;
}
#featured4 {
position: absolute;
z-index: 2;
width: calc(100vh * (1920 / 1080)); /* video width / height */
height: calc(100vw * (1080 / 1920)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wrapper5 {
position: relative;
height: 100vh;
overflow: hidden;
z-index: 2;
}
#featured5 {
position: absolute;
z-index: 2;
width: calc(100vh * (960 / 506)); /* video width / height */
height: calc(100vw * (506 / 960)); /* video height / width */
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
video {
z-index: -2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/******** smooth scroll scrollsnap********/
.scroll-container {
width: 100%;
height: 100vh;
overflow: auto;
-webkit-scroll-snap-type: y mandatory;
-ms-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;
}
.receveur {
scroll-snap-align: start;
scroll-behavior: smooth;
}
<!-- ************************** WHAT I NEED
IN DESKTOP
------
| 100vh|
| 100vw|
| |
| ↓ |
------
Scrollsnap
------
| 100vh|
|100vw |
| |
| ↓ |
------
Scrollsnap
------
|100vh |
|100vw |
| |
| ↓ |
------
IN MOBILE
------ ------ ------
|100vh | |100vh | |100vh |
|100vw | |100vw | |100vw |
| |Scrollsnap| |Scrollsnap| |
| → | → | → | → | → |
| | | | | |
------ ------ ------
***********--!>
<!-- ****************************** FIRST section ********************************* -->
<div class="scroll-container">
<div class="receveur receveur-1"></div>
<div id="wrapper">
<div id="featured">
<video autoplay="true" muted="true" loop>
<source src="style/vid/3_third.mp4" type="video/mp4" />
</video>
<div class="centering_container">
<div class="text_id">
<h1 style="line-height:120%;">Section 1</h1>
</div>
</div>
</div>
</div>
<!-- ****************************** SECOND section ********************************* -->
<div class="receveur receveur-2" id="arrowscroll"></div>
<div id="wrapper2">
<div id="featured2">
<video autoplay="true" muted="true" loop>
<source src="style/vid/1_first.mp4" type="video/mp4" />
</video>
<div class="centering_container2">
<div class="text_id">
<h1 style="line-height:120%;">SECTION<br>2<span class="tim">™</span></h1>
</div>
</div>
</div>
</div>
<!-- ***************************** THIRD sectiom ********************************************* -->
<div class="receveur receveur-3"></div>
<div id="wrapper3">
<div id="featured3">
<video autoplay="true" muted="true" loop>
<source src="style/vid/2_second.mp4" type="video/mp4" />
</video>
<div class="centering_container3">
<div class="text_id">
<h1 style="line-height:120%;">Section <br>3</h1>
</div>
</div>
</div>
</div>
<!-- ***************************** FOURTH VIDEO ********************************************* -->
<div class="receveur receveur-4"></div>
<div id="wrapper4">
<div id="featured4">
<video autoplay="true" muted="true" loop>
<source src="style/vid/5_fifth.mp4" type="video/mp4" />
</video>
<div class="centering_container4">
<div class="text_id">
<h1>Section 4</h1>
</div>
</div>
</div>
</div>
<!-- ***************************** FIFTH VIDEO ********************************************* -->
<div class="receveur receveur-5"></div>
<div id="wrapper5">
<div id="featured5">
<video autoplay="true" muted="true" loop>
<source src="style/vid/4_fourth.mp4" type="video/mp4" />
</video>
<div class="centering_container5">
<div class="text_id">
<h1>Section 5</h1>
</div>
</div>
</div>
</div>
</div>
</div>