preface

Because in the company, there’s only one front end, when you’re doing the mobile layout. Use PX layout, found that the need for a variety of mobile phone adaptation. So when I was developing the second version, I thought about using the Lib-Flexible library (the solution of hand cleaning) and asked my colleagues in the previous company, and there were some fonts and some weird questions. Out of the blue, a net friend told me that he had a good adaptation. The use of vw + rem. Look, he analyzed one, and it looked good, so he went for it

According to theCSS 3 specification, viewport units mainly include the following four:

  • Vw: 1VW is equal to 1% of the viewport width
  • Vh: 1vh equals 1% of the viewport height
  • Vmin: Choose the smallest of vw and vH
  • Vmax: Pick the largest of vw and vH

Measured in viewport unit, viewport width is 100VW, height is 100vh (left is portrait screen, right is landscape screen)

For example, if the browser viewport size is 650px on the desktop, 1VW = 650 * 1% = 6.5px (this is a theoretical calculation, if the browser does not support 0.5px, the actual rendering might be 7px).

compatibility

Use palatability units to adapt pages

For mobile terminal development, the most important point is how to adapt the page, to achieve the compatibility of multi-terminal, different adaptation methods have their own strengths, but also have their own shortcomings.

In terms of the mainstream responsive layout and elastic layout, the layout realized by Media Queries needs to configure multiple response breakpoints, and the experience is also very unfriendly to users: the resolution of the layout within the range of response breakpoints remains unchanged, and at the moment of response breakpoints switching, the layout brings a fault switching transformation. Like a record player on a cassette, clicking and clicking.

In the flexible layout with dynamic calculation in REM units, it is necessary to embed a script in the head to monitor the change of resolution to dynamically change the font size of the root element, which makes CSS and JS coupled together.

Is there a way to solve this problem?

The answer is yes, adapting pages by using palatability units solves both reactive faulting and script dependency.

Usage based on iPhone6 (750)

The first step is usually to set the meta tag on the mobile

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

Since the iPhone6 and most DPR are 2, convert for the convenience of step 2

The second step is to set the body and HTML font size

HTML {font-size: 13.33333333333 vw // design 100px, browser according to the zoom 50px}Copy the code

13.33333333333 VW?

100/750 = 0.1333333333333 VW

We take this as 100px and divide it by 750 to get 1px = 0.1333333333333 VW

So the whole palatability equals 0.1333333333333 * 100 = 13.33333333333 vw = 100px

The final result is 100px = 1rem (100px design, 50px browser zoom)

By doing this we converted REM to 100px by design using VW

Tip: (Design 100px, zoom to 50px for browser)

It’s good to use it on a project

Div {// width: 100px; width: 1rem; } span { height: .12rem }Copy the code

Projects that have used this solution and are online

This project is developed by myself, the technology is slightly slag, much inclusion