SVG is introduced in CSS to accommodate partial Andro instances

This article mainly and you introduced the CSS in the introduction of SVG to compatible parts of the Andro display 0.5px border example of the relevant information, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

Objective

In the development of H5 page, found that some Andro native browser is not compatible with 0.5px border, this time it is very annoying, such as the following code:

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

Using REM to improve

Think of the way in rem, because the H5 page draws on the hand of the response pixel, according to the mobile device dpi set the root element of the font-size size, so almost all PX has been changed to REM as a unit, so as to better achieve the mobile side of the responsive pixels and Retina The performance on the screen. The code is as follows:

Input {  /* 47 is the font-size size of the page root element *  /Border-bottom:calc (1REM/47) solid #DCDCDC;}

There are some models in the test perfect display, but some still do not show, online has a post that can use pseudo-elements: before and: After the performance of 1px, and then use Transform:scaley (0.5); Make a high-level adjustment, the idea is good, but grandma a bear the INPUT element does not support pseudo-elements.

Finally, a great way to find out: using svg! in CSS

The introduction of SVG in CSS to improve

The idea is to add background-image to the element, and then put the SVG as a picture type, because the 1px on the SVG is actually only 1 physical pixels.

The implementation is simple and the code is as follows:

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> ');}

Daoteng more than this, use PHP code to convert the SVG XML code into Base64 format and try again:

<?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> ');? >

The output is as follows:

Phn2zyb4bwxucz0nahr0cdovl3d3dy53my5vcmcvmjawmc9zdmcnihdpzhropscxmdaljybozwlnahq9jzewmcunpjxsaw5lihgxpscwjyb5mt0nmtawjscge di9jzewmcunihkypscxmdaljybzdhjva2u9jynky2rjzgmnihn0cm9rzs13awr0ad0nmscvpjwvc3znpg==

Again introduced into the CSS Background-image: (note the original UTF8 to change to base64)

Input {  Background-image:url ("Data:image/svg+xml;base64, Phn2zyb4bwxucz0nahr0cdovl3d3dy53my5vcmcvmjawmc9zdmcnihdpzhropscxmdaljybozwlnahq9jzewmcunpjxsaw5lihgxpscwjyb5mt0nmtawjscge di9jzewmcunihkypscxmdaljybzdhjva2u9jynky2rjzgmnihn0cm9rzs13awr0ad0nmscvpjwvc3znpg== ");}