CSS视口问题：vh与100％

Question

我使用HTML＆amp;编码响应式网站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);

000 =页脚高度

Answer 1

  

我正在寻找一个解决方案：在桌面上使用100vh，在移动设备上使用100％。这可能吗？

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

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

了解更多mdn doc

w3schools exemples are nice

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

我在你提供的代码

上应用了css-trick上的内容

＆＃13;

＆＃13;

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

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

编辑-2-： 从你重播的答案：

  

桌面屏幕（1920x1200px结果）

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

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

尝试更改最大设备宽度＆＃39;查询所需结果的值 - 1920px（及以上）

编辑-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

的提示

所以我建立了这个＆＃34;切换＆＃34;。它适用于iPhone 6S，但在桌面屏幕（1920x1200px结果）上，风格根本不会出现。我的错误在哪里？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

解决这个问题：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;