Web フロントエンドで 0.5 ピクセルを描画するためのいくつかの方法_html/css

Web フロントエンドで 0.5 ピクセルを描画するためのいくつかの方法_html/css_WEB-ITnose

Jun 24, 2016 am 11:35 AM

最近、会社が手配したモバイル Web タッチスクリーンの開発が完了しました。これは、モバイルデバイス上で線を表示するもので、当初は PC で一般的に使用されている CSS ボード属性を使用して 1 ピクセルの線を表示していましたが、モバイルデバイスでは動作しませんでした。淘宝網と JD.com のタッチスクリーンを参照すると、モバイルデバイスでの表示には浅くて細い線が使用されていることがわかりました。

以下は、0.5ピクセルの線を描画するための4つのより便利な方法の記録です

1. タオバオのタッチスクリーンでも使用される方法であるメタビューポート方法を使用します

一般的に使用されるモバイルHTMLビューポート設定は次のとおりです

&lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;

ログイン後にコピー

具体的な意味あまり言うことはありませんが、ページの高さと幅をデバイスの高さと幅のピクセルに等しくすることであり、0.5 ピクセルのビューポートの描画を容易にするために、設定は次のようになります続いて

&lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no&quot; /&gt;

ログイン後にコピー

このように、HTMLの幅と高さはデバイスの2倍になります。このとき、CSSボードが1ピクセルであれば、肉眼でのページ行と同等の効果が得られます。のtransform:scale(0.5)、つまり0.5ピクセル

しかし、この方法にはページ全体のレイアウト計画と画像サイズの作成が含まれるため、この方法を事前に決定する方が良い場合

2番目、 border-image メソッドを使用します

これは実際には比較的単純です。0.5 ピクセルの線とそれに対応する背景色の画像を作成するだけです

<!DOCTYPE html><html><head>    <meta charset="utf-8">    &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;    <title>boardTest</title>    <style>            p{                margin: 50px auto;                padding: 5px 10px 5px 10px;                color: red;                text-align: center;                width: 60px;            }                        p:first-child{                border-bottom: 1px solid red;            }            p:last-child{                border-width: 0 0 1px 0; border-image: url("img/line_h.gif") 2 0 round;            }            </style></head><body>    <div>        <p>点击1</p>        <p>点击2</p>    </div></body></html>

ログイン後にコピー

3. 背景画像メソッドを使用します

私は、linear-image メソッドを使用します。ここでのgradientメソッドのコードは次のとおりです

<!DOCTYPE html><html><head>    <meta charset="utf-8">    &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;    <title>boardTest</title>    <style>            p{                margin: 50px auto;                padding: 5px 10px 5px 10px;                color: red;                text-align: center;                width: 60px;            }                        p:first-child{                border-bottom: 1px solid red;            }            p:last-child{                background-image: -webkit-linear-gradient(bottom,red 50%,transparent 50%);            background-image: linear-gradient(bottom,red 50%,transparent 50%);            background-size:  100% 1px;            background-repeat: no-repeat;            background-position: bottom right;            }            </style></head><body>    <div>        <p>点击1</p>        <p>点击2</p>    </div></body></html>

ログイン後にコピー

linear-gradient(bottom,red 50%,transparent 50%); は、グラデーションカラーが下から描画され、色は赤、割合は50%、を意味します。全体の幅は 100% に設定され、全体の高さは 1 ピクセルです。background-size: 100% 1px; これは、0.5 ピクセルであることを示しています。

描いた線の高さを半分に拡大縮小するコードは次のとおりです

<!DOCTYPE html><html><head>    <meta charset="utf-8">    &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot; /&gt;    <title>boardTest</title>    <style>            p{                margin: 50px auto;                padding: 5px 10px 5px 10px;                color: red;                text-align: center;                width: 60px;            }            p:first-child{                border-bottom: 1px solid red;            }            p:last-child{                position: relative;            }        p:last-child:after {            position: absolute;            content: '';            width: 100%;            left: 0;            bottom: 0;            height: 1px;            background-color: red;            -webkit-transform: scale(1,0.5);            transform: scale(1,0.5);            -webkit-transform-origin: center bottom;            transform-origin: center bottom        }            </style></head><body>    <div>        <p>点击1</p>        <p>点击2</p>    </div></body></html>

ログイン後にコピー