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

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

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

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

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

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

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

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" />

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

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

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

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

        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />            
        
点击1
        
点击2
    

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

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

        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />            
        
点击1
        
点击2
    

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

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

        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />            
        
点击1
        
点击2