css中引进svg来适配一部分安卓系统机显示信息0

坚信大伙儿昨日开启某 404 检索模块的情况下应当都看到这张照片了，迫不得已说，后人会以这么1种方法来留念前人，并且還是1个杰出的企业，挺打动的。

序言

在开发设计 H5 网页页面的情况下发现，一部分安卓系统机的原生态访问器兼容问题 0.5px 的 border ，这时候候就很闹心了，以下所示编码：

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

应用 rem 改善

后边想起了用 rem 的方法，由于 H5 网页页面效仿了手淘的回应式像素，依据挪动机器设备的 dpi 设置了根元素的 font-size 尺寸，因此基本上全部的 px 都改为了 rem 做为企业，这样能够更好地去完成挪动端回应式像素和 Retina 显示屏上的主要表现。编码以下：

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

检测中有一部分机型完善展现了，可是有一部分還是无法显示，在网上有帖子说能够运用伪元素 :before 和 :after 开展 1px 的主要表现，随后运用 transform: scaleY(0.5); 开展高宽比上的调剂，思路很好，但奶奶个熊 input 元素不适用伪元素。

最终，物色到了1个很妙的方式：在 CSS 中应用 svg！

css 中引进 svg 来改善

实际思路是为元素再加 background-image ，随后把 svg 置为照片种类，由于 svg 上的 1px 便是切切实实的只占 1 个物理学像素。

完成很简易，编码以下：

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

捣腾不止于此，运用 php 编码把 svg 的 xml 编码转成 base64 文件格式再试试：

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

輸出以下：

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==
 

再引进到 css 的 background-image 中：(留意原 utf8 要改为 base64 )

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

结语

实际上也有许多方式能够来处理这个难题，大伙儿畅快充分发挥1下脑洞吧。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。