如何在ionic 2中制作高度響應式屏幕？

Question

我知道我們可以在ionic 2中制作水平響應內容。我想知道的是如何使所有類型的屏幕都響應頁面高度，例如，如果某個屏幕覆蓋了iPhone 5的整個區域，那么它應該覆蓋iPhone中的整個高度wisie區域。 7還？ 什么是實現這一目標的最佳方法？

Answer 1

如前所述，您可以將vh用作CSS的height屬性。 這里要注意的是，即使屏幕方向保持不變， viewport也可能會改變。 當您在應用程序中放置input並獲得焦點時，就會發生這種情況。 屏幕上會彈出移動設備的鍵盤，並且視口的高度會發生變化，這是因為鍵盤參與其中。 ˚F您的手機屏幕是430x710（一些隨機數在這里）1vh將7.1px，但是當你敲擊輸入，並可以說鍵盤是430x300，現在1vh將4.1px（（710 - 300）/ 100）

響應式設計可能是一個真正的問題。 我的建議是使用vw ，唯一可能改變它的是屏幕方向（您可以鎖定它）。 額外的步驟是您必須使用conversion才能在vw中獲得您之前在vh中想要的正確數字。

Answer 2

希望我已經正確理解了您的問題，您希望頁面高度與查看設備的高度相同嗎？

好吧，讓我向您介紹...。

視口高度（或vh）

1 vh等於視口高度的1％。 因此，您可以想象，100vh等於視口高度的100％！ 視口基本上是頁面的視圖。 但是請注意 ，Internet Explorer 8或更早版本不支持vh單元。

Answer 3

希望您能從以下參數中獲得正確響應的好主意。

大眾：1/100視口寬度

vh：1/100視口高度

vmin：最小邊的1/100

vmax：最大邊的1/100

實際上，vh是基於viewporot做出響應的完美解決方案。 視口是瀏覽器渲染站點的區域。 這是您的屏幕減去瀏覽器鑲邊的保留空間。 有時您想要基於該視口調整元素的大小，例如側邊欄。 可以使用我們都熟悉的單位來完成：百分比。