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