ホームページ ウェブフロントエンド htmlチュートリアル Web フロントエンドで 0.5 ピクセルを描画するためのいくつかの方法_html/css_WEB-ITnose

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">    &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>
ログイン後にコピー

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

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

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

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

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

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? &lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

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

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

&lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;の目的は何ですか 要素?

&lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

&lt; Progress&gt;の目的は何ですか 要素?

&lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;の目的は何ですか 要素?

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? HTML5のクロスブラウザー互換性のベストプラクティスは何ですか? Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか?

See all articles