ホームページ >ウェブフロントエンド >CSSチュートリアル >一部の Android インスタンスと互換性を持たせるために CSS に svg を導入

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

小云云オリジナル: 2018-02-24 09:53:481748ブラウズ

この記事は主に、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

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

関連記事