preface

When developing the H5 page, I found that some android native browsers are not compatible with the 0.5px border, so I was very upset, as shown in the following code:

input {
  border-bottom: 0.5 px. solid #DCDCDC;
}
Copy the code

Using REM improvement

Then I came up with the REM method. Because H5 page uses the responsive pixels of mobile phone for reference and sets the font size of the root element according to the DPI of mobile device, almost all px is changed to REM as the unit. This allows for responsive pixels on mobile and Retina displays. The code is as follows:

input {
  /* 47 is the size of the page root element */
  border-bottom: calc(1rem/47) solid #DCDCDC;
}
Copy the code

In the test, some models are perfectly displayed, but some are still not displayed. There is a post on the Internet that we can use fake elements :before and :after to perform 1px, and then use transform: scaleY(0.5); The height adjustment is a good idea, but the input element does not support pseudo-elements.

In the end, I found a neat way to use SVG in CSS!

CSS has been improved by introducing SVG

The idea is to add background-image to the element and set the SVG to the image type, since 1px on an SVG is really only 1 physical pixel.

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

input {
  background-image: url("data:image/svg+xml; utf8,
      
       
      "); }Copy the code

Try converting SVG XML to Base64 using PHP code:


      
  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>");
? >
Copy the code

The output is as follows:

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScg eDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==Copy the code

Background-image :(note that utf8 should be changed to base64)

input {
  background-image: url("data:image/svg+xml; base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nM TAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg=="); }Copy the code

conclusion

There are many ways to solve this problem, so let your imagination run wild.

It is the end of the year, no matter you go out to play or on the way home, you must pay attention to all directions and take care of your belongings. I hope my readers are safe and happy in the New Year, no matter how far it is, they will go home again. This winter, not cold!