我用HTML和CSS编写了一个响应式网站。我使用Bootstrapper框架。
我的问题：当我使用100％作为背景图像时，图像将无法到达桌面屏幕上的页面末尾（因为缩放100％高度的图像小于显示器结果）。在iPhone（Safari）上看起来不错。页脚将位于图像下方。
当我使用视口值100vh时，桌面屏幕上的结果看起来不错（图像将填充背景），但在移动设备（iPhone）上，文本将与页脚重叠。看起来很可怕。
我正在寻找一个解决方案：在桌面上使用100vh，在移动设备上使用100％。那可能吗？
HTML的代码：
<section id="myid">
<div class="myclass">
<div class="container">
<div class="row">
<div class="col-md-8 opaline">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<p>Great Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-10">
<p>Great Footer Content</p>
</div>
</div>
</div>
</footer>CSS :(移动浏览器上的OK-Result）
.myclass {
/* The image used */
background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
padding-top: 36px;
}CSS :(桌面浏览器上的OK-Result）
.myclass {
/* The image used */
background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
padding-top: 36px;
}我也玩过calc函数 - 没有成功：
height: calc(100vh - 000px);我正在寻找一个解决方案：在桌面上使用100vh，在移动设备上使用100％。那可能吗？
如果那就是你要找的东西，你可以使用 - @media CSS at-rule -
@media CSS at-rule可用于根据一个或多个媒体查询的结果应用样式，在您的情况下是屏幕大小。
阅读更多mdn doc
编辑：找到可能与css-tricks相关的东西
我在你提供代码的代码上应用了css-trick上的内容
@media only screen
and (min-device-width: 1000px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
.myclass {
/* The image used */
background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
padding-top: 36px;
}
}
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.myclass {
/* The image used */
background: linear-gradient(rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1));
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
padding-top: 36px;
}
}<section id="myid">
<div class="myclass">
<div class="container">
<div class="row">
<div class="col-md-8 opaline">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<p>Great Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-10">
<p>Great Footer Content</p>
</div>
</div>
</div>
</footer>编辑-2-：从你重播的答案：
桌面屏幕（1920x1200px分辨率）
并在您发布的代码中使用
@media only screen
and (min-device-width: 1000px)
and (max-device-width: 1600px)`
尝试将“最大设备宽度”查询值更改为所需分辨率 - 1920px（及以上）
编辑-3-：
正如您刚刚在解决方案中回复的那样，因为桌面视图是默认的，因此从桌面媒体查询中完全删除分辨率像素范围可能会成功
你是否谈到这只适用于iPhone或所有手机？
因为如果这适用于所有移动视图，您可以使用@media来执行此操作。
也许这些链接可以帮助您：
Media Queries for Standard Devices
Using the viewport meta tag to control layout on mobile browsers
感谢@media的提示
所以我建立了这个“开关”。它适用于iPhone 6S，但在桌面屏幕（1920x1200px结果）上，风格根本不会出现。我的错误在哪里？
/* Mobile Device */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.myclass {
/* The image used */
background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
padding-top: 36px;
}
}
/* Desktop Screen */
@media only screen
and (min-device-width: 1000px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
.myclass {
/* The image used */
background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
padding-top: 36px;
}
}解决它像这样：
/* Mobile Devices */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
{
.myclass {
/* The image used */
background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
padding-top: 36px;
}
}
/* Desktop Screen */
/* Mobile Devices */
@media only screen
{
.myclass {
/* The image used */
background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
padding-top: 36px;
}
}