CSS视口问题：vh与100％

Question

我使用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结果）

 .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结果）

 .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); 

000 =页脚高度

Answer 1

我正在寻找一种解决方案，例如：在台式机上使用100vh，在移动台上使用100％。 那可能吗？

如果这就是您要寻找的内容，则可以使用-@ media CSS规则 -

@media CSS规则可用于基于一个或多个媒体查询的结果来应用样式（在您的情况下为屏幕尺寸）。

阅读更多mdn doc

w3schools示例很好

编辑：发现可能与css技巧有关的东西

我在您提供的代码上应用了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)`

尝试将“最大设备宽度”查询值更改为所需的结果-1920像素（及更高）

---

编辑-3-：

正如您刚在解决方案中回答的那样，因为桌面视图是默认视图，所以从桌面媒体查询中完全删除分辨率像素范围可能会解决问题

Answer 2

您是否说这仅适用于iPhone或所有手机？

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

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

使用媒体查询

标准设备的媒体查询

使用视口元标记控制移动浏览器上的布局

响应式网页设计-媒体查询

Answer 3

感谢@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; } } 

Answer 4

像这样解决它：

 /* 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; } }