一部の Android インスタンスと互換性を持たせるために CSS に svg を導入

この記事は主に、0.5px の境界線を表示する一部の Android マシンと互換性を持たせるために CSS に svg を導入する例に関する関連情報を紹介します。参照。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

前書き

H5 ページを開発しているときに、一部の Android マシンのネイティブ ブラウザが 0.5 ピクセルの境界線と互換性がないことがわかりました。コードは次のとおりです。 rem の改善

後で rem を使おうと思ったのですが、H5 ページはタオバオモバイルのレスポンシブピクセルを借用し、モバイルデバイスの dpi に従ってルート要素のフォントサイズを設定したため、ほぼすべてのピクセルが rem に変更されました。ユニットとして、モバイル側での応答性の高いピクセルと Retina スクリーンでのパフォーマンスを向上させることができます。コードは次のとおりです:

input {
  border-bottom: 0.5px solid #DCDCDC;
}

テストでは、一部のモデルは完全に表示されましたが、一部のモデルはまだ表示されませんでした。インターネット上には、疑似要素: before と :after を使用して 1px を実行できるという投稿があります。高さを調整するというアイデアは非常に優れていますが、入力要素は疑似要素をサポートしていません。

ついに、CSS で svg を使用するという素晴らしい方法を見つけました。

改善するために CSS に svg を導入します

具体的なアイデアは、背景画像を要素に追加し、画像タイプとして svg を設定することです。svg の 1px は実際には 1 物理ピクセルしか占有しないからです。

実装は非常に簡単で、コードは次のとおりです:

input {
  /* 47 是页面根元素的 font-size 大小 */
  border-bottom: calc(1rem/47) solid #DCDCDC;
}

問題はそれだけではありません。PHPコードを使用してSVG XMLコードをbase64形式に変換し、再試行してください:

input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=&#39;http://www.php.cn/2000/svg&#39; width=&#39;100%&#39; height=&#39;100%&#39;><line x1=&#39;0&#39; y1=&#39;100%&#39; x2=&#39;100%&#39; y2=&#39;100%&#39; stroke=&#39;#dcdcdc&#39; stroke-width=&#39;1&#39;/></svg>") ;
}

出力は次のようになります:

PHN2ZyB4bWxucz0naHR0c DovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIH gxPScwJyB5MT0nMTAwJScgeDI9JzEw MCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9 rZS13aWR0aD0nMScvPjwvc3ZnPg= =

CSS の背景画像に再導入: (元の utf8 を Base64 に変更する必要があることに注意してください)

rreee

関連するおすすめ:

SVG と Vanilla JS フレームワークで「スターからハート」コードを作成 共有

SVG を使用してカラフルなリングのカウントダウンの実装を開始する方法

Webpack が実際に SVG をロードする方法の詳細な例

以上が一部の Android インスタンスと互換性を持たせるために CSS に svg を導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。