我是HTML / CSS的新手，我目前正在尝试将我的桌面网站改为移动设备，而且我发现它非常棘手。
该网站包含100vw和100vh的滑动部分（使用https://github.com/malihu/page-scroll-to-id）。然后用这样的背景填充这些部分中的每一部分：
#content section{
width: 100vw;
min-height: 100vh;
}
#content section:nth-child(1){
background: url('Pic1.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 0% 75%;
}
/*Same for other sections*/
这四个部分按预期分配。这完全符合我在桌面版上的需求。
从这里开始，我试图在两个方向上为iPhone 4/5创建媒体查询
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
{
/*Blah blah blah*/
#content section{
width: 100vw;
min-height: 100vh;
}
#content section:nth-child(1){
background: url('Pic1.jpg') no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 0% 75%;
}
/*Etc etc*/
在此范围内，我试图使用较小的移动背景图像重新显示这些部分，但使用与上述相同的CSS。
期望/希望看到的内容 也许期望是一个坏词（新手，所以没有什么可以去计划）。我希望图像显示为四个屏幕高度尺寸的图像在彼此之上。就像在桌面上一样。
我看到的内容 四个非常大的拉伸图像在彼此之上。它似乎保持了桌面网站的尺寸，并拉伸移动图像以适应这些。
我尝试了什么 我尝试使用％，vh，vws进行不同的调整，但没有一致的效果。
对不起，如果这是微不足道的，但我严重陷入困境！
谢谢！