プロダクトマネージャーがテクノロジーを学ぶ: モバイル Web の画面適応方法 (1)_html/css_WEB-ITnose

【記事概要】 しばらく更新していませんでしたが、最近はちょっとハードな内容、プロダクトマネージャー学習技術シリーズを投稿する予定です。

プロダクト マネージャーがテクノロジーを理解する必要があるかどうかを議論する必要はありません。プロダクト マネージャーがこれらの記事からいくつかの技術原則を学ぶことができることを願っています。

関連概念:

ビューポート: 画面の可視領域。表示画面のサイズとして理解できます。

1

モバイル適応とは、通常、Web ページの効果がデザイナーのデザイン ドラフトと同じに見えるように、Web ページを複数の画面サイズに適応させることを指します。率直に言うと、同じコード セットが解像度の異なる携帯電話で実行されると、ページ要素間の間隔、空白、画像サイズがそれに応じて変化し、比率はデザイン ドラフトと一致して最適な状態が実現されます。映像効果。

写真 1. 260*400 画面

写真 2. 380*400 画面

一見すると、平均的なエ​​ンジニアは問題ないと思うでしょう。は OK なので、フロントエンド エンジニアは画面の適応を簡単に無視できます。しかし、エクスペリエンスの詳細を気にするプロダクト マネージャーの場合は、次の問題が見つかる可能性があります:

図 1 の画面サイズは小さいため、アバターも小さくする必要があり、アバターの左側のスペースも小さくなる必要があります。トピックも小さくする必要があります。

画像は正方形のままで、画面の変化に応じて 2 つの画像間の余白が変化する必要があります

率直に言うと、これは、異なる画面への適応がうまく行われていないことを意味し、一部の環境下では視覚効果が損なわれます。画面が最適化されていません。

2

この記事では適応方法のみに焦点を当てているので、結論だけを先にお話します。後ほど機会があれば、ビューポートと CSS ピクセル ピクセルの詳細についてお話します。

Web ページはビューポート内にレイアウトされ、ビューポートは小さな正方形に分割され、1 つの CSS ピクセルが 1 つの正方形を占めます。異なるサイズ、1 CSS ピクセルが占める画面の物理サイズは同じです

長さの単位 rem は、html タグの font-size (フォント サイズ) に相対します。たとえば、html タグは font-size:36px を設定し、div は width:1.2rem を設定します。この場合、この div の幅は 1.2rem=36px*1.2=43.2px になります

上記の例のように、JS を使用して、読み込み時に画面のサイズに応じて HTML タグのフォントサイズを動的に設定すると、サイズ値が変更されると、それに応じて px 値に変換された div の 1.2rem も変更されます。つまり、div は画面サイズに応じて変更され、CSS コードは常に width: 1.2 になります。レム。ページのすべての要素についても同様です。

3 、現在のブラウザで 1rem のピクセル値を計算し、それを HTML タグのフォントサイズに割り当てます (計算を容易にするために 10rem に分割されています)

CSS コードを記述するときに、必要な箇所に遭遇します。 width や margin 、padding などを調整するには、もう px を使用せず、代わりに rem を使用してください

JS と Html コードは次のとおりです:

CSS コードは次のように変更されました:

実行結果は以下の通りです: 余白もアバター画像も 画面の変化に合わせて変化します

コードがわからなくても問題ありません 簡単に説明すると、HTMLページが読み込まれた後です。 、ページ幅はいくつかの等しい部分 (ここでは 10 部分) に分割されます。たとえば、ページ幅が W ピクセルの場合、1rem = W/10 ピクセルとなります。これ以降の幅の使用はすべて rem を使用して変換されます。マージン、パディングなど。

4 どうですか？

デザインドラフトの幅は携帯電話の幅とみなされます。つまり、ビューポートが 400px の携帯電話があると仮定します

それを 10rem に分割し、各レムは 40px;

その後、画像の横幅20pxは当然0.5remです

ちょっと待ってください、サイズを書くたびにデザイナーから指定されたpxを原稿用紙上のremに変換しなければならないことを意味しませんか？心配しないでください。この変換に役立つ Sublime Text 3 のプラグインがあります。20px を入力するだけで、自動的に 0.5rem に変換されます。これを見ればすぐに理解できます。下の写真

ほら、エンジニアは効率を改善できるツールをたくさん持っています~

この記事はProduct 100によって推奨され、紹介されています

記事の出典: WeChatパブリックアカウント: プログラマーおよびプロダクトマネージャー(devpdm)
記事の著者: gnaw 氏
フレンドリーなリマインダー:
出典が間違ってマークされている場合は、タイムリーに修正するために QQ: 2977686517 にご連絡ください。ご理解とご支援に感謝します。

公式 Weibo @product100 と WeChat 購読アカウント chanpin100ghsd をフォローしてください。サプライズがあるでしょう!