Introducing svg into css to be compatible with some Android instances

This article mainly introduces relevant information to you about the example of introducing svg into css to be compatible with some Android machines displaying 0.5px borders. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Preface

When developing the H5 page, I found that the native browsers of some Android machines are not compatible with the 0.5px border. This is very disturbing, as follows Code shown:

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

Use rem to improve

I thought of using rem later, because the H5 page borrowed from mobile Taobao The responsive pixels of the mobile device are set according to the dpi of the mobile device. The font-size of the root element is set, so almost all px are changed to rem as the unit. This can better realize the responsive pixels of the mobile terminal and the Retina screen. Performance. The code is as follows:

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

In the test, some models were displayed perfectly, but some were still not displayed. There are posts on the Internet saying that pseudo elements: before and :after can be used. 1px performance, and then use transform: scaleY(0.5); to adjust the height. The idea is very good, but the input element does not support pseudo elements.

Finally, I found a great way: using svg in CSS!

Introducing svg into css to improve

The specific idea is to add a background-image to the element, and then set the svg as the image type, because 1px on the svg is the actual It actually only occupies 1 physical pixel.

The implementation is very simple, the code is as follows:

input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=&#39;//m.sbmmt.com/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>") ;
}

The trouble does not stop there, use php code to convert the svg xml code into base64 format and try again:

<?php
  echo base64_encode("<svg xmlns=&#39;//m.sbmmt.com/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>");
?>

The output is as follows:

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nM TAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==

Reintroduced into the css background- image: (Note that the original utf8 should be changed to base64)

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

Related recommendations:

SVG and Vanilla JS framework create a "star" "Change to heart shape" code sharing

How to start implementing colorful ring countdown with SVG

Detailed example of how Webpack actually loads SVG

The above is the detailed content of Introducing svg into css to be compatible with some Android instances. For more information, please follow other related articles on the PHP Chinese website!