これは昔からある問題で、最初に私を悩ませたのは UI デザイナーでした。当時はまだフロントエンドの現場に入ったばかりで、このような状況でした。 :
デザイナーが携帯電話を持ってやって来ました。私のデザインのドラフトは 1px です。
私：？ ? ? ?私が書いたのは 1px です。信じられない場合は、見てください。 (彼は話しながら CSS コードを取り出しました
デザイナー: それは違います。私の目には、境界線が私のデザインのものよりもはるかに太く見えます (うーん、本当にピクセル化されています。
私：それでは0.5pxに変更しますので見てください（話しながらコードを変更しました）
デザイナーはそれを見てうなずき、確かにずっと良くなりました。
その後、同じコードが一部の Android マシンで問題が発生し、0.5px の線が見えなくなることが判明しました。
明らかに 0.5px に変更しても問題は解決しませんが、1px の境界線がデザイン ドラフトよりもはるかに太く見えるのはなぜでしょうか。
1pxボーダーのパフォーマンスCSSを直接使用して1pxの境界線を設定します。
html:
<ul class=hairlines> <li>1</li> <li>2</li></ul>
css:
* { マージン: 0; パディング: 0; } ul、li{ 幅: 300 ピクセル; マージン: 100 ピクセル; } -bottom: 1px ソリッド #cccccc // 境界線を 1px に設定します }取得したスクリーンショットは次のとおりです。
デザイン ドラフトよりもはるかに厚く見えます。次のようになります。
解決策 1: 疑似クラス + 変換問題を解決しようと考えたとき、その理由については明確に考えていませんでしたが、border-image または box-shadow を使用して関連する解決策をいくつか見つけました。これは、目的の効果をシミュレートすることもできます。 1pxの境界線効果ですが、個人的にはこれは普遍的ではなく、従来の解決策ではないと思います。
最終的な選択は、疑似クラス + 変換メソッドを使用することでした。原理は、元の要素の境界線を削除し、:before または :after を使用して境界線をやり直し、変換のスケールを元の要素の半分に減らすことです。要素は相対的に配置され、新しい境界線は絶対的に配置されます。
html 上記と同じ
CSSは次のとおりです。
* { マージン: 0; パディング: 0; } ul、li{ 幅: 300px; マージン: なし; } : 10px; } .hairlines li:after{ コンテンツ: ''; 左: 0; #cccccc; 幅: 100%; 高さ: 1px; -webkit-transform: スケール Y(0.5);この場合、描画される線は確かにかなり細くなります。私は 1 年間、上記の方法で 1px の境界線の問題を解決していましたが、使用後にいくつかの問題を発見しました。
1.なぜscaleY(0.5)なのか?どうやってこの0.5を取得したのですか？すべてのモデルを半分に縮小する必要があるのでしょうか、言い換えれば、それらはユニバーサルですか?
2. コンテナの 4 つの境界線を同時に描画したい場合はどうすればよいですか?
3.丸い枠線をサポートしていますか?
後者の 2 つの問題の解決策は、上記のコードを修正することで見つかります (効果を見やすくするために、通常の記述方法で得られる効果と疑似クラスを使用して得られる効果をまとめて、違いが分かりやすいです):
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=initial-scale=1、maximum-scale=1、minimum-scale=1、ユーザー スケーラブル=no, width=device-width> <title>モバイル端末での 1px の境界線の問題</title> <style> * { margin: 0; ul, li{ list-style:なし; } .lines { 幅: 200px; マージン: 0 } .lines li { 境界線: 1px; 行の高さ: 50px; -top: 10px; } .hairlines { 幅: 200px; 境界半径: 3px; } .hairlines li{ 高さ: 50px; 行の高さ: 50px; テキストの位置: 相対位置: 10px; : 絶対; 左: 0; 境界線: 1px 境界線の幅: 26px; 200%; 高さ: 200%; -webkit-transform: スケール(0.5); -webkit-transform-origin: 左上; ><body>太い線<ul class=lines> <li>1</li> <li>2</li></ul>細い線<ul class=hairlines> <li>3</li> <li>4</li></ul></body></html>結果のレンダリングは次のようになります。
下の境界線は明らかに細くなり、デザイン ドラフトに近くなります。
では、1. なぜscaleY(0.5)なのか?どうやってこの0.5を取得したのですか？すべてのモデルを半分に縮小する必要があるのでしょうか、言い換えれば、それらはユニバーサルですか?この質問にはどう答えるでしょうか?
ここで問題の本質に戻りますが、CSS に 1px と書いているにもかかわらず、通常よりも太く見えるのはなぜでしょうか。
情報を確認したところ、CSS で設定したピクセルとデバイスのピクセルが 1 対 1 で対応していないことがわかりました。つまり、CSS で 1px を指定すると、携帯電話で表示されるものが一致しない可能性があります。ポイントが占める幅は 1 ピクセルになります。
CSS のピクセルは抽象的で相対的な概念であり、デバイスや環境によって表現される物理的なピクセルは異なります。このように、1px のピクセルは実際には物理的なものです。ピクセルですが、今日の携帯電話の画面はすべて高解像度になっており、サイズが変わらなければ、画面はより多くのピクセルで埋め尽くされます。複数の物理ピクセル。
では、CSS ピクセル幅は物理ピクセル何個に相当するのでしょうか?
これには、devicePixelRatio (デバイスのピクセル比) を指定する必要があります。
devicePixelRatio = デバイス上の物理ピクセル/独立ピクセル。これは window.devicePixelRatio を通じて取得できます。このピクセル比は、実際には devicePixelRatio ピクセルに対応する CSS のピクセル幅に対応する物理ピクセルの数を正確に表すことができます。
ビューポートの初期スケール属性が 1 の場合、ページ サイズは通常ですが、初期スケールが 0.5 の場合、ページは 1 分の 1 に縮小されます。 devicePixelRatio が 2 のデバイスの元々の CSS ピクセル幅は 1 です。縮小後、1 CSS ピクセルの幅は 1 物理ピクセルのみを占めます。つまり、真の 1 物理ピクセルが実現されます。
解決策 2: rem + ビューポートこの時点で、解決策は明らかです。実行時にデバイスの devicePixelRatio を取得し、ビューポートの初期スケールを 1/devicePixelRatio に動的に変更することで、1px の幅が 1 物理ピクセルの真の幅になるようにすることができます。その他の適応にはremを使用してください（pxを使用すると縮小されるため）
コードは次のとおりです。
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <!--<meta name=viewport content=initial-scale=1、maximum-scale=1、minimum-scale=1 , user-scalable=no, width=device-width>--> <title>モバイル端末の 1px 境界線の問題</title> <script> (function () { var clientWidth = window.screen.width; var dpr = window.devicePixelRatio; var vp = document.documentElement.style.fontSize = clientWidth > '20px' : 20 * dpr * clientWidth / ' px'; vp.name = 'ビューポート'; `initial-scale=${1.0 * 1 / dpr}、maximum-scale=${1.0 * 1 / dpr}、minimum-scale=${1.0 * 1 / dpr}、user-scalable=no、width=device- width`; var m = document.getElementsByTagName('meta')[0]; m.parentNode.insertBefore(vp, m); </script> <style> * { マージン: 0; } ul, li{ リストスタイル: なし } .lines { 幅: 10rem; } { ボーダー: 1px ソリッド #cccccc; 高さ: 2.5rem; テキスト整列: 中心; 0.6rem; マージントップ: 0.5rem; </style></head><body><ul class=lines> <li>1</li> <li>2</li></ul></本文></html>得られる効果は以下の図で確認できます (携帯電話で見るとより明らかです)。
上記の観点から、前の質問に戻ります。 1. なぜscaleY(0.5)なのか?どうやってこの0.5を取得したのですか？すべてのモデルを半分に縮小する必要があるのでしょうか、言い換えれば、それらはユニバーサルですか?実際、dpr が 3 のデバイスでは、実際には 0.3333 である必要があります。携帯電話ごとに dpr が異なる場合があるため、一般的には 0.5 になります。少なくとも1pxより薄いので、デザイナーの要求もほぼ満たすことができます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。