Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to solve the problem of the 1px frame in the mobile Html5 page. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Question raised

This is an old problem. When I first noticed it, it was the UI designer who came after me. When I first entered the front-end workplace at emmm, I didn't know anything. The situation goes like this:

The designer came over with a mobile phone: these frames are all thick, my design draft is 1px.

Me:? I wrote 1px, I don't believe it. (then he took out the css code.

Designer: no, it seems to me that this frame is much thicker than my design manuscript. It looks so strange. (emmm is indeed a pixel eye.

Me: then I'll change it to 0.5px. Look at it. (I changed the code while talking.

The designer looked at it and nodded, and it was much better.

It was later found that there was a problem with the same code on some Android machines, causing the 0.5px line to be invisible.

Strange, obviously changing to 0.5px won't solve the problem, but it's true that the 1px frame looks much thicker than the design manuscript. Why?

The performance of the 1px border

I use css directly to define the frame of 1px.

Html:

1 2

Css:

* {margin: 0; padding: 0;} ul, li {list-style: none;} .hairlines {width: 300px; margin: 100px auto;} .hairlines li {position: relative; margin-top: 10px; border-bottom: 1px solid # cccccc; / / frame set to 1px}

The screenshot is as follows:

It looks much thicker than the design draft, and the design draft should be like the following, which you can compare:

Solution 1: pseudo class + transform

With the mentality of solving the problem, although I didn't think clearly about the reason at that time, I still found a relevant solution. Some of these methods mentioned using frame image border-image or box-shadow, which can also simulate the desired 1px border effect, but I personally think it is not universal, nor is it a conventional solution.

The final choice is to use pseudo-class + transform method: the principle is to remove the border of the original element, and then use: before or: after to redo border, and transform scale is reduced by half, the original element relative positioning, the new border absolute positioning.

Html ditto

Css is as follows:

* {margin: 0; padding: 0;} ul, li {list-style: none;} .hairlines {width: 300px; margin: 100px auto;} .hairlines li {position: relative; border:none; margin-top: 10px;} .hairlines li:after {content:'; position: absolute; left: 0; bottom: 0 Background: # cccccc; width: 100%; height: 1px;-webkit-transform: scaleY (0.5); transform: scaleY (0.5);-webkit-transform-origin: 00; transform-origin: 00;}

In this case, the lines drawn are indeed much thinner. I usually use the above method to solve the problem of 1px borders for as long as a year, but when I use it, I find several problems:

1. Why scaleY (0.5)? How did you get this 0.5? Is it true that all models want the scale to be reduced to half, in other words, universal?

two。 What if I want to draw four borders of a container at the same time?

3. Do you support fillet borders?

If you modify the above code for the last two problems, you can find a solution (to make it easier to see the effect, I put together the effect of the usual writing and the effect of using pseudo-classes, so it's easier to see the difference.):

Mobile 1px border problem * {margin: 0; padding: 0;} ul, li {list-style: none;} .lines {width: 200px; margin: 0 auto;} .lines li {border: 1px solid # cccccc; height: 50px; line-height: 50px; text-align: center; border-radius: 13px; margin-top: 10px Hairlines {width: 200px; margin: 0 auto; border-radius: 3px;} .hairlines li {height: 50px; line-height: 50px; border:none; text-align: center; position: relative; margin-top: 10px;} .hairlines li:after {content:'; position: absolute; left: 0; hairlines: 0 Border: 1px solid # cccccc; border-radius: 26px; width: 200%; height: 200%;-webkit-transform: scale (0.5); transform: scale (0.5);-webkit-transform-origin: left top; transform-origin: left top;} thick line 1 2 thin line 3 4

The result is as follows:

The following frame is obviously much thinner and closer to the design draft.

So "1. Why scaleY (0.5)? how did you get this 0.5? do all models have to reduce the scale to half, in other words, is it universal?" How should I answer this question?

This brings me back to the nature of the problem, why do I write 1px in css, but still have the effect that "looks much thicker than usual"?

After looking up the data, it turns out that the pixels set in css do not correspond to the pixels of the device one by one, that is to say, when I write 1px in css, in fact, what I see on the phone may not be the width occupied by a pixel.

The pixel of css is an abstract relative concept, and the physical pixel is different in different devices and environments. On older devices, the screen pixel density is relatively low, so it is true that a 1px pixel is a physical pixel, but with the rapid development of technology, today's mobile phone screens are all high resolution. If the size does not change, a screen will be filled with more pixels. At this point, the pixels of an css (often called logical pixels) will correspond to multiple physical pixels.

So how many physical pixels correspond to the pixel width of an css?

This is about to mention devicePixelRatio (device pixel ratio)

DevicePixelRatio = physical pixels / independent pixels on the device, which can be obtained through window.devicePixelRatio. This pixel ratio can exactly describe how many physical pixels correspond to the pixel width of a css, which is actually the corresponding devicePixelRatio pixels.

When the attribute initial-scale of viewport is 1, the page size is normal, but when initial-scale is 0.5, the page is reduced by twice as much. The device with devicePixelRatio 2 originally has a CSS pixel width of 2 physical pixels, and the reduced CSS pixel width only accounts for 1 physical pixel, that is, the real 1 physical pixel is realized.

Solution 2: rem + viewport

At this point, the solution is clear: we can get the devicePixelRatio of the device at run time and dynamically change the initial-scale of the viewport to 1/devicePixelRatio, thus ensuring that the width of the 1px is the true width of 1 physical pixel. Other adaptations use rem (because it will be reduced if you use px)

The code is as follows:

Mobile 1px border problem (function () {var clientWidth = window.screen.width; var dpr = window.devicePixelRatio; var vp = document.createElement ('meta'); document.documentElement.style.fontSize = clientWidth > 414?' 20px': 20 * dpr * clientWidth / 360 + 'px'; vp.name =' viewport' Vp.content = `initial-scale=$ {1.0 * 1 / dpr}, maximum-scale=$ {1.0 * 1 / dpr}, minimum-scale=$ {1.0 * 1 / dpr}, user-scalable=no, width=device- width`; var m = document.getElementsByTagName ('meta') [0]; m [XSS _ clean] .insertBefore (vp, m);}) (); * {margin: 0; padding: 0 } ul, li {list-style: none;} .lines {width: 10rem.margin: 0 auto;} .lines li {border: 1px solid # cccccc; height: 2.5rem.line-height: 2.5rem.text-align: center; border-radius: 0.6rem.margin-top: 0.5rem.} 1 2

The results can be seen in the following picture (more obvious on mobile phones):

These are all the contents of this article entitled "how to solve the problem of 1px borders in mobile Html5 pages". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.