【モバイルアダプテーション】モバイルWeb向けに画面アダプテーションを行う方法 (3)_html/css_WEB-ITnose

複雑で混沌とした世界の背後には、常に変わらないシンプルなルールがあります

Mr. :

「モバイル Web の画面適応を行う方法 (1)」では、rem を使用して処理する方法に焦点を当てます。サイズ（幅、高さ、マージン、パディングなど）関連の適応。

「ピクセル境界線を実装する方法」では、物理ピクセル境界線の実装を紹介し、ビューポート、物理ピクセル、CSS ピクセルの概念、およびそれらの関係を紹介します。

これはモバイル アダプテーションに関する 3 番目の記事です

vw と vh を紹介し、その後 3 つの記事をまとめます。

画面の適応は見落とされがちな問題ですが、優れた製品には不可欠です

。

Web 開発の求職者にとって、これは明確に理解する必要がある古典的な質問でもあります

| Second

実際には、サイズ (幅、高さ、マージン、パディングなど) が関係しています。アダプテーションには、rem を使用する以外に、CSS3 の vh および vw を使用することもできます。 ビューポートの幅 (vw)、高さ (vh)、2 つの小さい方 (vmin)、または 2 つの大きい方 (vmax) のビューポート サイズの 1% を表す長さの単位。

は

vw を意味します。ビューポート幅の 1%、つまりビューポート幅を 100 分割し、1vw は 1 部分の幅を表します。

vh は身長です。ルールはvwと同じです。

wmin は vh と vw の小さい方、vmax は vh と vw の大きい方

一見、CSS のパーセントではありませんか?

div{ width = 1vw; }

は

div{ width:1%; } と同等です

そうですが、9 マスのグリッド画像のようなものを実現したい場合、魔法 。

たとえば、上記の画像レイアウト、つまり 3 つの画像が画面全体を占め、各画像が正方形であることを実現したい場合、vw を使用してそれを実現するにはどうすればよいでしょうか?コードは次のとおりです。

% を使用する場合、JS が動的設定を計算しない限り、純粋に CSS だけでは実現できません。

それでは、vwとvhの互換性は何ですか?

下の図の caniuse.com のクエリ結果を見てください。モバイル ブラウザ Android 4.3 はサポートしていません。

soga、シンプルに見えます。ここで疑問が生じます。なぜ前回の記事でレムを書くのにそんなに労力を費やしたのですか?

叁| 2つの実装方法:

ページ全体を拡大縮小する、ビューポートのスケールを設定する

単一の要素を拡大縮小する、スケールを変換する

そのうち、単一の要素の境界線を拡大縮小するソリューション角を丸くすることはできません。ページ スケーリング ソリューション全体は、CSS 標準と同じ方法で実装されます。

vw(vh) と rem は、サイズ関連の適応を解決する必要があります。 vw(vh) と rem の違いを比較します。

1. 互換性、vw は Android 4.3 以下の組み込みブラウザーと互換性がありません。

2 . Px to remプラグインは比較的豊富です

それでは、Android 4.3以下のオペレーティングシステムの国内市場シェアはどれくらいでしょうか？梅孟の統計結果は約31％であり、これは大きな金額です。

したがって、より安全な解決策はレムです。

したがって、モバイル Web プロジェクトを取得するときの私の意思決定のアイデアは次のとおりです:

四| デザイナーの出力など、モバイル適応に関するトピックがたくさんあります。鮮明さを維持しながらトラフィックを節約するには、どの程度の素材の解像度が必要ですか?

どのようなトピックであっても、ビューポート、CSS ピクセルと物理ピクセルの概念、およびそれらの間の関係を理解することが前提となります。

ということで、これまでにまとめた3つの記事は

モバイルアダプテーションの知識において非常に重要な基礎知識です。

ということで、最初の 2 つの記事をぜひチェックしてください。何か間違っている場合は、批判していただいても構いません。

このブログは主に技術記事を投稿しており、公式アカウントでは技術記事に加えて、深セン周辺の起業ストーリー、フロントエンドの紹介、体験ベースのものも投稿していますので、ご注目ください。