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ビューポート設定は次のとおりです
<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 ピクセルの線とそれに対応する背景色の画像を作成するだけです
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <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"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <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"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <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>

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?
