Introduction de svg dans CSS pour être compatible avec certaines instances Android

Cet article vous présente principalement des informations pertinentes sur l'exemple d'introduction de svg en CSS pour être compatible avec certaines machines Android affichant des bordures de 0,5 px. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner. comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Avant-propos

Lors du développement de la page H5, j'ai constaté que les navigateurs natifs de certaines machines Android ne sont pas compatibles avec la bordure de 0,5px, car c'est très inquiétant. suit Le code affiché :

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

Utiliser rem pour améliorer

Plus tard, j'ai pensé à utiliser rem, car la page H5 Les pixels réactifs empruntés à Taobao définissent la taille de la police de l'élément racine en fonction du dpi de l'appareil mobile, de sorte que presque tous les pixels sont remplacés par rem en tant qu'unité, ce qui permet de mieux implémenter les pixels réactifs et Retina du côté mobile à l'écran. performance. Le code est le suivant :

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

Lors du test, certains modèles s'affichaient parfaitement, mais certains ne s'affichaient toujours pas. Il existe des posts sur Internet que vous pouvez. use pseudo elements: before and: After effectue une performance de 1px, puis utilise transform: scaleY(0.5); L'idée est très bonne, mais l'élément d'entrée ne prend pas en charge les pseudo-éléments.

Enfin, j'ai trouvé un excellent moyen : utiliser svg en CSS !

Introduisez SVG dans CSS pour améliorer

L'idée spécifique est d'ajouter une image d'arrière-plan à l'élément, puis de définir le SVG comme type d'image, car 1px sur le svg est le réel. Il n'occupe en réalité qu'un seul pixel physique.

La mise en œuvre est très simple, le code est le suivant :

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

Le problème ne s'arrête pas là, utilisez le code php pour convertir le svg XML au format base64 et réessayez. Essayez :

<?php
  echo base64_encode("<svg xmlns='http://www.php.cn/2000/svg' width='100%' height='100%'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='#dcdcdc' stroke-width='1'/></svg>");
?>

Le résultat est le suivant :

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZ. Wl naHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAl JyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==

Réintroduit dans l'image d'arrière-plan du CSS : (notez que l'utf8 d'origine doit être modifié en base64)

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

Recommandations associées :

SVG et Vanilla JS Le framework crée un partage de code « en forme d'étoile à en forme de cœur »

Comment commencer à implémenter un compte à rebours en anneau coloré avec SVG

Un exemple détaillé de la façon dont Webpack charge réellement la méthode SVG

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!