preface

With the development of time, now basically everyone a mobile phone phubbers. As a front-end developer, when developing mobile web applications, facing a bunch of screens of different sizes, it is a little sad.

here

Obviously what we want to achieve is a large visual representation of the UI on so many screens. There are two main difficulties in achieving this effect

  1. Screen adaptation
  2. Details on the Retina screen (mostly 1px issues)

Screen adaptation

There are two schemes for the adaptation of each screen, flexible + REM and VW. What is the meaning of these three words, look very familiar, but what are these two plans, please allow me to elaborate.

flexible + rem

Obviously, this solution is composed of REM and Flexible. Rem (font size of the root element)font-size multiple of the computed value relative to the root element (i.e. HTML element) flexible A library written for the screen adaptation of this solution is provided by the Handwash team. The main function is to set a suitable font size for HTML elements according to the width of the screen.

How to read is not very understand. Let me repeat it again with a page scene.

Under normal circumstances, our UI will make a set of visual effect pictures based on the size of iphone6 and mark them, as shown below

How do we get this map

  1. Font-size: 37.5px (1rem = 37.5px);
  2. Take iphone6 for example, its screen width is 750px, the width of the entire screen is 20rem = 37.5 * 20px = 750px;
  3. The input box for the phone number is 490px = 13.06777777rem
  4. Convert the px on the page to REM in turn, and we have a page that is all REM in size

Does it end there? I’m sorry to tell you it’s not. Why font size is 37.5px for HTML elements? Now this screen works perfectly on the iphone6, does it work perfectly on the iphone5s, the iphone6p? (iphone6, iphone6s, iphone7. The iphone8 screen hasn’t changed, so this article uses the iphone6 instead.) We’re still working on the above two issues, and that’s where Flexible comes in. You can use JS to automatically set the font size of an HTML element based on the screen width.

<script src="Http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js, flexible. Js"></script>
Copy the code

Implied in the

In the above process, you’ll notice that the UI usually gives us a Px-labeled image, and we convert it to REM, which takes a lot of computing time. As a qualified programmer, we should leave this mechanical mindless operation to the computer. I use the PostCss plugin postCSS-px2REM, which allows us to write PX directly when writing code and automatically convert the PX we write into REM when building, greatly improving our development efficiency.

vw

This VW scheme is fairly new. Vw is (viewPort Width) the width of the visible window. The reason for putting this behind is that viewPort had some compatibility issues last year (2017) and wasn’t very well supported across browsers. But at this point in 2018, viewPort unit opinion is supported by many browsers (80.45%).

here

Let’s take a closer look at the plan. And since v sub w is a unit of size, what is its width? That’s equal to 1% of the entire screen width. For example, take the iphone6 again, 100vw = 750px => 1vw = 7.5px

So let’s do that interface again

  1. By definition, we know that 1vw = 7.5px on the iphone6
  2. The input box for the mobile phone number is 490px = 65.333333vw
  3. Convert the px on the page to VW in turn, so we have a page full of vw dimensions

Does it end there? Yes, it’s that simple.

Implied in the

The same pain point as before, we still need to spend a lot of unnecessary computing time to convert PX in the annotation map to VW, is there a tool similar to PostCSS-px2REM? It’s a great honor to stand on the shoulders of giants again. There is already a PostCss plugin postCSS-px-to-viewPort

1 px problem

Not only is there a resolution difference on mobile, there’s also the Retina issue. Normally, 1px in our code should be a pixel on the screen, but on Retina display it’s not just a pixel. Take iphone6 again for example, its DPR device pixel ratio is 2, a 1×1 point in CSS, It’s actually a 2×2 dot on the iphone6, and the 1px border will look 2px on the devicePixelRatio = 2 Retina display, and even 3px on the iphone6 Plus.

As a result, 1px on some phones is obviously not the same thickness as 1px on others. In fact, most small companies will not deduct such a detail, for example, our company will not. (^ __ ^) hee hee…

But as ambitious front-end engineers, we should try to make things perfect. Look like a big company, in the big company this detail problem is not allowed to ignore in fact, for their own future development, we have to perfect this detail.

There are many solutions to this problem. Personally, I think the simplest one is still a vast solution. Using the postCSs-write-SVG plug-in,

@svg 1px-border {
  height: 2px;
  @rect {
    fill: var(--color.black);
    width: 100%; height: 50%; }}.example {
  border: 1px solid transparent;
  border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}
Copy the code

So that’s compiled

.example {
  border: 1px solid transparent;
  border-image: url("data:image/svg+xml; charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}
Copy the code

other

Screen adaptation in applets

It was difficult to use PostCSS when writing apts, which used apts sets and, unlike the usual Vue and React buckets, did not have WebPack configured. (I couldn’t figure it out, anyway.)

What to do, the small program provides a unit of its own, RPX (Responsive Pixel) : can be adapted according to the screen width. Specify a screen width of 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels, then 750rpx = 375px = 750 physical pixels and 1rpx = 0.5px = 1 physical pixel.

equipment RPX convert px (screen width /750) Convert PX to RPX (750/ screen width)
iPhone5 1 the RPX = 0.42 px 1 px = 2.34 the RPX
iPhone6 1 the RPX = 0.5 px 1px = 2rpx
iPhone6p 1 the RPX = 0.552 px 1 px = 1.81 the RPX

So let’s just take the iphone6 and write RPX. Great 👍

conclusion

If you take a closer look, you will find that the previous REM scheme actually simulates vw’s implementation scheme, and there are many similarities between the two. There’s a quote on Lib-Flexible’s Github.

Since viewPort units are compatible with many browsers, lib-flexible is a transition solution that can be abandoned, and there are problems with both current and previous versions. It is recommended that you start using viewPort instead. See “How to Use VW for Mobile Adaptation in Vue Projects” for a VW compatibility solution.

We can get a very clear message that lib-flexible has been abandoned and we can embrace VW’s implementation scheme.

This article refers to several articles in www.w3cplus.com

  1. Use Flexible to achieve terminal adaptation of H5 page
  2. Talk about the adaptation of the mobile page
  3. Heading for the Retina Web
  4. Let’s talk about the 1px solution for Retina
  5. Small program – WXSS