Html CSS视口问题：vh与100%

我用HTML和CSS编写了一个快速响应的网站。我使用Bootstrapper框架

我的问题：当我使用100%作为背景图像时，图像不会到达桌面屏幕上的页面末尾（因为以100%高度缩放的图像小于监视器结果）。在iPhone（Safari）上，它会很好看。页脚将位于图像下方

当我使用Viewport值100vh时，桌面屏幕上的结果看起来会很好（图像将填充背景），但在移动设备（iPhone）上，文本将与页脚重叠。看起来很可怕

我正在寻找一种解决方案，如：桌面使用100vh，移动使用100%。可能吗

HTML代码：

内容丰富

伟大的页脚内容

我正在寻找一种解决方案，如：桌面使用100vh，移动使用100%。可能吗

如果这就是你想要的，你可以使用-@媒体CSS规则-

@media CSS at规则可用于根据一个或多个媒体查询的结果应用样式，在您的情况下是屏幕大小

阅读更多

编辑：找到可能相关的内容

我在您提供的代码上应用了css技巧

@仅媒体屏幕
和（最小设备宽度：1000px）
和（最大设备宽度：1600px）
和（-webkit最小设备像素比：1）{
.myclass{
/*使用的图像*/
背景：线性梯度（rgba（33,37,43,0.6），rgba（33,37,43,0.1））；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
高度：100vh；
填充顶部：36px；
}
}
@仅媒体屏幕
和（最小设备宽度：375px）
和（最大设备宽度：667px）
和（-webkit最小设备像素比：2）{
.myclass{
/*使用的图像*/
背景：线性梯度（rgba（33,37,43,0.6），rgba（33,37,43,0.1））；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
身高：100%；
填充顶部：36px；
}
}

内容丰富

伟大的页脚内容

您是说这只适用于iPhone还是适用于所有手机

因为如果这在所有手机视图中都有效，您可以使用@media来实现

也许这些链接可以帮助您：

---

谢谢@media的提示

所以我建立了这个“开关”。它在iphone6s上运行良好，但在桌面屏幕（1920x1200px结果）上根本不会出现这种风格。我的错在哪里

/*移动设备*/
@仅媒体屏幕
和（最小设备宽度：375px）
和（最大设备宽度：667px）
和（-webkit最小设备像素比：2）
和（方向：纵向）{
.myclass{
/*使用的图像*/
背景：线性梯度（rgba（33,37,43,0.6），rgba（33,37,43,0.1）），url（/images/image.jpg）；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
身高：100%；
填充顶部：36px；
}
}
/*桌面屏幕*/
@仅媒体屏幕
和（最小设备宽度：1000px）
和（最大设备宽度：1600px）
和（-webkit最小设备像素比：1）{
.myclass{
/*使用的图像*/
背景：线性梯度（rgba（33,37,43,0.6），rgba（33,37,43,0.1）），url（/images/image.jpg）；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
高度：100vh；
填充顶部：36px；
}
}

这样解决：

/*移动设备*/
@仅媒体屏幕
和（最小设备宽度：375px）
和（最大设备宽度：667px）
和（-webkit最小设备像素比：2）
{ 
.myclass{
/*使用的图像*/
背景：线性梯度（rgba（33,37,43,0.6），rgba（33,37,43,0.1）），url（/images/image.jpg）；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
身高：100%；
填充顶部：36px；
}
}  
/*桌面屏幕*/
/*移动设备*/
@仅媒体屏幕
{ 
.myclass{
/*使用的图像*/
背景：线性梯度（rgba（33,37,43,0.6），rgba（33,37,43,0.1）），url（/images/image.jpg）；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
高度：100vh；
填充顶部：36px；
}
}

在两个方向上都使用100%并使其最小高度为100vh，会产生您想要的结果吗？