複雑で混沌とした世界の背後には、常に変わらないシンプルなルールがあります
Mr. :
「モバイル Web の画面適応を行う方法 (1)」では、rem を使用して処理する方法に焦点を当てます。サイズ(幅、高さ、マージン、パディングなど)関連の適応。「ピクセル境界線を実装する方法」では、物理ピクセル境界線の実装を紹介し、ビューポート、物理ピクセル、CSS ピクセルの概念、およびそれらの関係を紹介します。
vw と vh を紹介し、その後 3 つの記事をまとめます。
画面の適応は見落とされがちな問題ですが、優れた製品には不可欠です
。Web 開発の求職者にとって、これは明確に理解する必要がある古典的な質問でもあります
| Second
は
vw を意味します。ビューポート幅の 1%、つまりビューポート幅を 100 分割し、1vw は 1 部分の幅を表します。vh は身長です。ルールはvwと同じです。
wmin は vh と vw の小さい方、vmax は vh と vw の大きい方
は
div{ width:1%; } と同等です
そうですが、9 マスのグリッド画像のようなものを実現したい場合、魔法 。
たとえば、上記の画像レイアウト、つまり 3 つの画像が画面全体を占め、各画像が正方形であることを実現したい場合、vw を使用してそれを実現するにはどうすればよいでしょうか?コードは次のとおりです。
% を使用する場合、JS が動的設定を計算しない限り、純粋に CSS だけでは実現できません。
それでは、vwとvhの互換性は何ですか?
下の図の caniuse.com のクエリ結果を見てください。モバイル ブラウザ Android 4.3 はサポートしていません。
soga、シンプルに見えます。ここで疑問が生じます。なぜ前回の記事でレムを書くのにそんなに労力を費やしたのですか?
叁| 2つの実装方法:
ページ全体を拡大縮小する、ビューポートのスケールを設定する
そのうち、単一の要素の境界線を拡大縮小するソリューション角を丸くすることはできません。ページ スケーリング ソリューション全体は、CSS 標準と同じ方法で実装されます。
vw(vh) と rem は、サイズ関連の適応を解決する必要があります。 vw(vh) と rem の違いを比較します。
2 . Px to remプラグインは比較的豊富です
したがって、より安全な解決策はレムです。
したがって、モバイル Web プロジェクトを取得するときの私の意思決定のアイデアは次のとおりです:
四| デザイナーの出力など、モバイル適応に関するトピックがたくさんあります。鮮明さを維持しながらトラフィックを節約するには、どの程度の素材の解像度が必要ですか?
どのようなトピックであっても、ビューポート、CSS ピクセルと物理ピクセルの概念、およびそれらの間の関係を理解することが前提となります。
ということで、これまでにまとめた3つの記事はモバイルアダプテーションの知識において非常に重要な基礎知識です。
ということで、最初の 2 つの記事をぜひチェックしてください。何か間違っている場合は、批判していただいても構いません。