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：（移动浏览器上的正常结果）

.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：（在桌面浏览器上结果正常）

.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

I looking for a solution like: on Desktop use 100vh, on Mobile use 100%. Is that possible?

如果这就是你要找的，你可以使用 - @media CSS at-rule -

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

阅读更多mdn doc

w3schools exemples are nice

编辑：找到了可能相关的内容 css-tricks

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

@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- : 来自您重播的答案：

Desktop Screen (1920x1200px resultion)

并且在您发布的代码中使用了

 @media only screen 
 and (min-device-width: 1000px) 
 and (max-device-width: 1600px)`

尝试将 'max device width' 查询值更改为所需的结果 - 1920 像素（及以上）

编辑-3- :

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

Answer 2

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

因为如果这在所有移动设备视图中都有效，您可以使用@media 来完成。

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

Using media queries

Media Queries for Standard Devices

Using the viewport meta tag to control layout on mobile browsers

Responsive Web Design - Media Queries

Answer 3

感谢@media

的提示

所以我构建了这个 "switch"。它在 iPhone 6S 上运行良好，但在桌面屏幕（1920x1200 像素结果）上根本不会出现该样式。我的错误在哪里？

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

CSS 视口问题：vh 与 100%

CSS Viewport issue: vh vs. 100%

html

css

viewport

ios

responsive