イオン2で高応答画面を作る方法は？

Question

私はイオン反応性の高いコンテンツを作ることができることを知っています2.私は知っておきたいのは、スクリーンがすべてのタイプのスクリーンに対して反応するようにする方法です。例えば、 iPhone 7でも？これを達成するための最良のアプローチは何ですか？

Answer 1

私はあなたの質問を正しく理解したら、ページの高さをそれを見ているデバイスの高さと同じにしたいと思いますか？

まあ、私はへ....

ビューポートの高さ（またはVH）

一つVHは、ビューポートの高さの1％に等しいをご紹介しましょう。あなたが想像することができるように、100vhはビューポートの高さの100％に等しいでしょう！ビューポートは基本的にページのビューです。ただし、はです.vhユニットはInternet Explorer 8以前ではサポートされていません。

Answer 2

以下のパラメータから適切に応答するようにしてください。

VW：1/100ビューポートの幅

VH：1/100ビューポートの高さ

VMIN：最小側の1/100

VMAX：1/100番台最大の

実際にはvhは完璧ですビューポットに基づいて反応するようにすること。ビューポートは、ブラウザがサイトをレンダリングする領域です。これはあなたの画面からブラウザのクロムの予約されたスペースを引いたものです。サイドバーのように、そのビューポートに基づいて要素のサイズを設定することがあります。これは、われわれがよく知っているユニットパーセンテージを使用して行うことができます。

Answer 3

すでに述べたように、CSSのheightプロパティにはvhを使用できます。ここでのキャッチは、画面の向きが変わらない場合でもviewportが変更される可能性があることです。これは、inputをアプリに配置してフォーカスを取得したときに発生します。モバイルデバイスのキーボードが画面上にポップアップし、キーボードがその一部を取ったためにビューポートの高さが変化します。 Fお使いの携帯電話の画面は、7.1pxことができますが、入力時にタップすると、現在1vhになり、キーボードが430x300であると言うことができますでしょう430x710（ここではいくつかのランダムな番号）1vhです応答デザインで本当の問題がある可能性が

- 4.1px（）/ 100（）。私の助言はvwを使用することです、それはそれを変更する可能性のある唯一のものは、画面の向きです（あなたはそれをロックすることができます）。余分なステップは、vwで適切な番号を取得するためにコンバージョンを使用して、前にvhにしたかったことです。