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

日期:2021-03-01 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

坚信大伙儿昨日开启某 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下脑洞吧。

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

上一篇:深层次了解CSS @font 返回下一篇:没有了