One. 1px border problem

No matter in an interview or at work, you should have encountered the 1px border problem. It doesn’t matter if you don’t know, let’s review it now (if you know, you can skip to part 2). A 1px border, as the name suggests, is a 1px line drawn at the front, and by 1px, it refers to the size of the screen. So what’s the difference between 1px on screen and 1px in CSS? Each physical pixel (1px on the screen) is the smallest unit of image display. CSS 1px is the basic unit of browser rendering. On a normal screen, 1px corresponds to one physical pixel; on a 2x screen, 1px corresponds to two physical pixels; and on a 3x screen, 1px corresponds to three physical pixels. This is similar to the experiment with the coordinates of the paper, if the paper has ten little (equivalent to 10 physical pixel), drawing your own coordinate system when a unit with 1 small, then you do eventually figure relatively small area of the whole paper, and the coordinate system of a unit with 10 small said, may be part of the whole paper can only draw the image, But more details will be kept. In case 2, a line of the same unit length would be 10 times longer than in case 1. The same is true when the browser renders at high magnification, drawing a line at 2x and a line at 3x.

Two. Screen adaptation of different sizes

For screen adaptation on mobile terminals, not only various sizes need to be considered, but also DPR (screen pixel ratio, which can be understood as the number of physical pixels per px). DPR = 2 means 2x screen. On a 350px wide device, the normal screen looks fine, but on a 2x screen, the lines look thick. You might use hacks such as Transform scaling and creating shadows to simulate borders, but there are some problems with that. What if you need to draw 1px lines globally? We just have to make sure that 1px takes up only 1 physical pixel at all times. The global view is scaled using the ViewPort of the meta tag. It usually looks like this:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
Copy the code

Set initial-scale=0.5 for 2-x screens and initial-scale=0.33 for 3-x screens, so, We also need to get the DPR with the script window.devicepixelRatio before rendering the page and set the initial-scale to 1/ DPR.


      
<html>
    <head>
        <meta charset="utf-8" language="zh-cn-hans">
        <script>
            (function(){
                function resetViewPort (){
                    var viewport = document.querySelector('meta[name = viewport]');
                    if(! viewport){ viewport =document.createElement("meta");
                        var head = document.querySelector("head");
                        head.insertBefore(viewport,head.firstChild);
                    }
                    var ratio = window.devicePixelRatio||1;
                    var content = 'width=device-width,initial-scale='+ Math.round(100/ratio) / 100 +',maximum-scale=1,user-scalable=no';
                    viewport.setAttribute("content",content);
                };
                window.addEventListener('DOMContentLoaded',resetViewPort); }) ()</script>
    </head>
    <body>
    </body>
</html>
Copy the code

At this point, all 1px below the screen corresponds to 1 physical pixel, now we just need to consider different screen sizes. But now we have a problem, because px is not the same length as before, and if we use px to describe elements now, it’s going to be smaller, so we need a different unit to represent elements. Now let’s think about what other units does CSS have besides PX?

  • %

  • em,rem

  • vw

  • .

% is usually relative to the parent element, and when there are multiple levels of nesting, it can be complicated and difficult to determine. Similarly, em has this disadvantage. Rem is always relative to the font size of the root element, which is unique, and as long as we make sure that the font size of the root element is proportional to the width of the screen on different screens, we get the same effect. This is a nice way to add a few lines of code to the script above, has good browser compatibility, and has been covered in many articles. But today, he’s not our hero. And then vw, 1vw is 1/100 of the screen width, and an element 30vw wide is 30% of the screen width on device A, and 30% of the screen width on device B, and that’s what we want, right? Let’s look at vw compatibility, and you can see that VW is almost completely compatible. Font-size + REM is actually a vw simulation, so why don’t we just use it?

Automatic conversion plug-in

We usually take the design draft and write the size according to the mark. The notation is usually px, but now it’s vw, so you need to do a conversion. Postcss-unity plugin can be used for unity, unity, unity, unity, unity, unity, unity, unity, unity, unity, unity, unity, unity, unity, unity, unity Here’s a quick look at PostCSS, which turns CSS into JS objects for easy manipulation, and the result into CSS code, which you can learn more about here (how to write plug-ins is also linked).

Other four.

Double eleven has passed, I am still single! This article refers to a lot of articles, at the same time combined with the practice of exploration, what is wrong or better welcome to put forward. ~~ is all you see, still don’t give a praise?