adapter

The page adapter

First, layout adaptation can make PC, mobile phone and tablet share the same code. The implementation methods include CSS media query, CASS elastic box model, CSS Grid layout, and responsive layout. The second is hd adaptation, in the face of mobile development of devices with different resolutions and different sizes, the maximum reduction of the design effectCopy the code

flexible

Rem flexible. Js is a method of HD adaptation. It dynamically sets font size for HTML through javascript according to the DPR value and device width of different devices. The other elements use REM as the unit.

Core 1 DPR (Device pixel ratio) = Physical pixels (screen pixels)/device independent pixels (CSS pixels)

The core 2 rem

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

Standard HTML root element of the font – size = document. The documentElement. DPR clientWidth * n/n here can be set freely, flexible n would be a 10, so that the element size fit screen size and DPR

1. Unit conversion

The size we get from the design is px, and converting to REM units depends on the compiler plug-in, and there will be decimals. So you can customize the flexible-.js file to calculate the standard value of n for font size at 3.75, so that in HD 1rem = 100px, you can convert units just by doing the calculations in your head.

Px2rem-loader: Webpack loader, convert PX into REM

Project summary

1. Hd issues with images under Retina

Because bitmap pixel a bitmap pixel is the smallest data unit of raster image (such as: PNG, JPG, GIF, etc.) under different DPR, loading images of different sizes requires a picture server, get parameters through THE URL, and then can control the image quality, can also crop the image to different sizes

2. Under Retina, border: 1px problem

plan

.border-top-1px, .border-top-1px-sales, .border-right-1px, .border-bottom-1px, .border-bottom-1px-sales, .border-left-1px { position: relative; &::before, &::after { content: ""; display: block; position: absolute; transform-origin: 0 0; } } .border-top-1px { &::before { border-top: 1PX solid #ddd; left: 0; top: 0; width: 100%; transform-origin: 0 top; } } .border-right-1px { &::after { border-right: 1PX solid #ddd; top: 0; right: 0; height: 100%; transform-origin: right 0; } } .border-bottom-1px { &::after { border-bottom: 1PX solid #ddd; left: 0; bottom: 0; width: 100%; transform-origin: 0 bottom; } } .border-top-1px-sales { &::after { border-bottom: 1PX solid #f1f1f1; left: 0; bottom: 0; width: 100%; transform-origin: 0 bottom; } } .border-bottom-1px-sales { &::after { border-bottom: 1PX solid #f1f1f1; left: 0; bottom: 0; width: 100%; transform-origin: 0 bottom; } } .border-left-1px { &::before { border-left: 1PX solid #ddd; top: 0; left: 0; height: 100%; transform-origin: left 0; } } .all-border { position: relative; } .all-border::after { content: ' '; position: absolute; top: 0; left: 0; border: 1PX solid #ddd; border-radius: 2px; box-sizing: border-box; transform-origin: 0 0; display: block; width: 100%; height: 100%; } @media (min-resolution: 2dppx) { .border-top-1px { &::before { width: 200%; transform: scale(.5) translateZ(0); } } .border-right-1px { &::after { height: 200%; transform: scale(.5) translateZ(0); } } .border-bottom-1px { &::after { width: 200%; transform: scale(.5) translateZ(0); } } .border-left-1px { &::before { height: 200%; transform: scale(.5) translateZ(0); } } .all-border { &::after { width: 200%; height: 200%; transform: scale(.5) translateZ(0); } } } @media (min-resolution: 3dppx) { .border-top-1px { &::before { width: 300%; transform: scale(.333) translateZ(0); } } .border-right-1px { &::after { height: 300%; transform: scale(.333) translateZ(0); } } .border-bottom-1px { &::after { width: 300%; transform: scale(.333) translateZ(0); } } .border-left-1px { &::before { height: 300%; transform: scale(.333) translateZ(0); } } .all-border { &::after { width: 300%; height: 300%; transform: scale(.333) translateZ(0); }}}Copy the code

3. For my project, I want to summarize the traditional adaptation scheme named H5 source adaptation scheme

The designer’s V1 requires a triple design drawing requiring all models to display exactly the same proportions. Our solution is modified flexble source code

 function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          width = 540 * dpr;
      }
      var rem = width * 100 / 1242;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }

  win.addEventListener('resize'.function() {
      clearTimeout(tid);
      tid = setTime
Copy the code

Write the design drawing directly in the code to prepare the size in plugin by setting px2scale 3 times smaller

What is the effect that satisfies the unity of proportions but=

1. The designer could not get the ideal physical size well during acceptance, and fe was also very painful. 2. The large screen is large and the small screen is small. 3. Different adaptation between app page and client, different module sizes, poor experienceCopy the code

It’s all a matter of history.

Designer’s V2 requirements

Designers need to see the same effect on different devices, including text and layout structure. Different sizes are not required. 100% page structure is fine

The designer’s design philosophy required us to develop the mobile terminal in a rasterized form, and they also designed it in a rasterized form

I understand the idea of rasterization

Width is the concept of partition so let’s put whatever percentage of assembly height is

The viewPort is the view entry provided by the browser engine and the default is the original size and it’s not equal to the default physical size of the phone so we need the ideal viewport ratio so that all phones have viewports equal to the physical width of the phone so that we can fit it so all h5s have this code on them

<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no,viewport-fit=cover">

  1. Viewport Idealized initialization ratio Render ratio is device type
  2. Write as much as you like in rasterization mode

Conclusion under

Horizontal adaptation is divided into layout adaptation and hd screen adaptation vertically divided into three schemes

  1. Media query do adaptive layout (see project)
  2. Flexible Solution Pure H5 (also available)
  3. H5 Source Solution (recommended)