一部の 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; }

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

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

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

input { background-image: url("data:image/svg+xml;utf8,") ; }

PHN2ZyB4bWxucz0naHR0c DovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIH gxPScwJyB5MT0nMTAwJScgeDI9JzEw MCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9 rZS13aWR0aD0nMScvPjwvc3ZnPg= =

rreee

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

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