[モバイル アダプテーション] ピクセルの実装方法 border_html/css_WEB-ITnose

ピクセルの複雑で問題のある世界

記事 | ヤン氏 2016 年 3 月 3 日 初公開 WeChat 公開アカウント (ヤン氏)

前回の記事は「[モバイル適応] 画面を適応させる方法」 to mobile Web" Match》

壹| Fisrt

CSS の世界では、Px はアトミックな操作です。境界線の幅を 0.5 ピクセルに定義することはできず、最小値は 1 ピクセルです。したがって、次の結論が得られます:

ただし、卓越性を追求する製品にとって、この理解は一方的なものにすぎません。例: 高解像度の画面 (iPhone5s など) では、枠線が 2 つだけあるページを作成しました。特別に処理された枠線は 1 ピクセルの枠線よりも細くなります。

したがって、高解像度の画面では、border-width:1px; は最小の境界線ではありません。ブラウザが表示できる最小粒度は、CSS の 1px より小さくなります。

贰 | Second

それで、CSS の 1px とは何ですか?ブラウザはどのようにレンダリングするのでしょうか?

Web ページはビューポートと呼ばれるものでレンダリングされます。キャンバスは N x M 個の小さな正方形に分割されており、1 CSS ピクセルはその小さな正方形の 1 つです。

ビューポートとは何ですか?

Web ページはビューポート上にレンダリングされます。PS 上に何かを描画すると、その上にキャンバスが存在します。N は幅、M は高さです。 。幅と高さを任意に設定できるため、ビューポートは仮想になります。設定した幅を400とすると、ブラウザの表示領域の横方向は400分割され、CSSの1pxの幅は表示領域の1/400となります。 980なら1/980です。

ビューポートの値が異なる場合のページ要素の幅への影響

ページを見て、他のコードには触れず、ビューポートの幅のみを変更し、ページにどのような変更が起こったかを確認してください

コードは以下の通りです:

以下 分岐結果です

viewport=500 case

viewport=900 case

ユーザーのアバターの写真、アバターの幅は 50px であることがわかります。

ビューポートの幅が500の場合、画面は横に500の部分に分割され、各部分は1pxなので、アバターの幅は画面の1/10になります。 (500/50=10)

ビューポートの幅が900の場合、画面は水平に900の部分に分割され、各部分は1pxなので、アバターの幅は画面の1/8になります。 (900/50=18)

つまり、CSS では、1px はビューポート内の小さな正方形を指し、ビューポートの幅は任意に設定できます。

叁 | 第三

それでは、ビューポートの幅を適切に設定するにはどうすればよいでしょうか?

ビューポートの幅は数値または文字列「device-width」です。 device-width はデバイスの幅を指します。

値が数値の場合は、携帯電話の画面が何であっても、ビューポートが非常に多くの部分に分割されていることを意味します

値がデバイス幅の場合は、携帯電話のビューポートの幅を意味します携帯電話の画面は に設定されています。 携帯電話の幅は同じです。では、この幅はどのように計算されるのでしょうか?

デバイス幅アルゴリズム

まず、いくつかの非常に重要な用語の概念を明確にします:

物理ピクセル: 携帯電話を購入すると、解像度は n*m になります。これは、画面 *m 画像ポイント、1 つのポイント (小さな正方形) が物理ピクセルです。画面上に表示できる最小の粒度です

CSSピクセル: CSSにおけるPxです。 前述したように、ビューポート内の小さな正方形です。

ピクセル密度: dpi または ppi、 画面の 1 インチあたりの物理ピクセル。

CSS ピクセルと物理ピクセルの間には変換関係があります。つまり、

このうち、変換系の計算処理は以下の通りです:

Androidの濃度領域と変換係数の対応表

iPhoneの濃度領域と変換係数の対応表係数

(免責事項: 上記の 3 つの写真は http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml から引用しています)

たとえば: Android フォン、解像度は 1920*1080、画面オブジェクトのラインは 5 インチです。では、この携帯電話では 1 つの CSS ピクセルが物理的に何ピクセルを占めるのでしょうか?

ステップ 1: ピタゴラスの定理を使用して対角線の解像度を計算します。つまり、√(1920²+1080²)≈2203px

ステップ 2: dpi を計算します。対角解像度/対角インチ = 2203/5≈440dpi

ステップ 3: 変換係数を取得します。上の図によると、Android 携帯電話は XXHDPI に属する 440dpi で、変換係数は 3

したがって、この携帯電話では、1 CSS ピクセル = 3*物理ピクセルになります。つまり、1 つの CSS ピクセルは 3 つの物理ピクセルを占有します。

この変換係数は、デバイスのピクセル比である dpr にも相当します。

デバイス幅の幅値の単位は明らかに CSS ピクセルであるためです。 したがって、ビューポートがデバイス幅に設定されている場合、それは現時点での携帯電話の水平解像度/変換係数になります。つまり、

たとえば、上記の例では、Android スマートフォンのデバイス幅は 1080/3 = 360、つまり、ビューポートの幅は 360 CSS ピクセルです。

ビューポートを固定数に設定すると、この変換関係が破壊される可能性があります。1 つの CSS ピクセルが可能な限り正確に dpr 物理ピクセルを占めるように、ビューポートの幅をデバイス幅に設定することをお勧めします。

四 | 四番目

border-width:1px よりも細い境界線があるのはなぜですか?

画面に表示できる最小粒度は 1 物理ピクセルであり、ビューポート幅がデバイス幅に設定されている場合、1 CSS ピクセルが占める物理ピクセルは変換係数によって決まります。したがって、iPhone 6 のような高解像度画面では、変換係数は 3、border-width: 1px となり、この境界線は 3 物理ピクセルを占有します。境界線の幅を物理 1 ピクセルにできれば、CSS の 1 ピクセルよりも細くなります。この記事の冒頭の境界線が細いのは、境界線が占有するだけになるように特殊な加工が施されているためです。 1物理ピクセル。

1 つの CSS ピクセルが 1 つの物理ピクセルを占有するようにする方法。

方法 1: ビューポートのスケール

ビューポートのプロパティでは、幅と高さの設定に加えて、拡大縮小率のスケールもあります。

スケールが 1 の場合、ページサイズは通常ですが、スケールが 0.5 の場合、ページは 1 倍に縮小されます。本来、CSS の 1 ピクセル幅は 2 物理ピクセル幅を占め、縮小された border-width: 1px のみです。 1 物理ピクセルを占有します。コードは次のとおりです:

このうち、initial-scale は 1/dpr です。

利点:

1. 境界線の多くのスタイル コードを記述する必要はなく、以前と同じ境界線: 1px 実線 #D5D5D6 を記述するだけです

2. 丸い境界線の半径を簡単に設定できます。

短所:

1. ページ全体が縮小され、副作用として、フォント、画像、他の要素のサイズ余白などがすべて同じ割合で縮小されます。この場合、ビューポートを dpr*document.documentElment.clientWidth に設定し、前回の記事「【モバイルアダプテーション】モバイル Web の画面アダプテーションを行う方法 (1)」と組み合わせることで問題が解決します。

方法 2: スケールを変換する

方法 1 は、ページ全体を拡大縮小する CSS3 標準では、要素を拡大縮小することができます。たとえば、特定の div.border-top に対して、DIV の上部に境界線が表示されるように次のスタイルを設定します

.border-top{position: relative;border-top: none !important;}.border-top:after {    content: " ";    position: absolute;    left: 0;    top: 0;    width: 100%;    height: 1px;    background-color: #D5D5D6;    -webkit-transform-origin: 0 0;    -ms-transform-origin: 0 0;    transform-origin: 0 0;    -webkit-transform: scaleY(0.5);    -ms-transform: scaleY(0.5);    transform: scaleY(0.5);}

DIV の後ろに高さ 1px のコンテンツを追加し、それを dpr に縮小しますここでは元の 1/2 に縮小されます。

利点は、ページ全体をズームする必要がないことです。欠点は、枠線のコードが多く、枠線の半径の丸めが達成できないことです

書いた後、崩壊寸前です。 。

ビューポートと px についての深い理解 (http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml)
物語2 つのビューポート (http://www.quirksmode.org/mobile/viewports.html)

適応問題についての話はまだ終わっていませんが、長くて臭い、純粋に技術的な記事で、難しすぎます。今度はスープを飲んでみようかな。

コーディングを始めて初めて、コーディングが簡単ではないこと、そしてコーディングを続けるのはさらに難しいことに気づきます。転載の際は出典を明記してください

記事が役に立ったと思ったら、下の

おすすめをクリックしてください