Taobao flexible for adaptation

  • viewport
<meta 
  name="viewport" 
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale: 1.0"
>
Copy the code

Older versions of flexible.js modify the scale value, which can cause some problems.

  • Calculate the rem
var docEl = document.documentElement
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
Copy the code

ClientWidth is the visible width of the root element, if viewPort scale=1.0 then for iPhone4 clientWidth=320px, if scale=0.5 then clientWidth=640px, No matter how you change the viewPort value, REM is equal to 1/10 of the visible width of the root node.

There is a paragraph in the old version 0.3.2.

var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; If (isIPhone) {// In iOS, for 2 and 3 screens, use 2x solution, and for the rest, use 1x solution if (devicePixelRatio >= 3 && (! dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (! dpr || dpr >= 2)) { dpr = 2; } else { dpr = 1; }} else {// For other devices, use the same scheme DPR = 1; } scale = 1 / dpr;Copy the code

Dynamically update scale through device DPR. This approach does not affect REM calculations, the advantage is that it solves the 1px problem, and the disadvantage is that it breaks the CSS media.

In the new version 2.0, the dynamic calculation of scale is removed. Instead, the feature of 0.5px is checked and the class name hairlines is added to make it compatible

// detect 0.px supports if (DPR >= 2) {var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) }Copy the code

How to convert from PX to REM units

1. Set the value of 1rem by the compiler. The compiler will automatically convert PX to REM during development

  • Advantages: easy to use, do not need to be converted by other means
  • Disadvantages: not conducive to later code maintenance

2. Use the sASS function to convert units

@function pxTorem($px){return $px /$browser-font size * 1rem; }. First {font-size: pxTorem(100px); height: pxTorem(10px); width: pxTorem(200px); }Copy the code

3. With the help of Webpack, PX2REM-loader

Download the loader

npm install style-loader css-loader px2rem-loader --save-dev
Copy the code

4. Use the PostCSS PX2REM plugin

Download the loader

npm i postcss-px2rem --save-dev
Copy the code

Summary of REM adaptation principle of mobile terminal:

  • The pixel unit of the design is PX, called CSS pixel.

  • We need to restore the design draft 100 percent, that is, to the equipment in proportion to the design draft.

  • First, each mobile device has its own physical pixels and device-independent pixels, and the relationship between them is called DPR(Device Pixel Ratio). That is, DPR = physical pixels/device independent pixels.

  • To attract users, the iPhone company introduced the retina screen concept, which is a DPR of 2 or 3 depending on the phone’s size. That is, each design individual pixel will occupy 4 physical pixels or 9 physical pixels.

  • Then, we talk about the concept of viewports and zoom ratio, viewports are divided into layout viewports, visual viewports and ideal viewports, and device zoom ratio.

  • Layout viewport refers to how many device-specific pixels the page occupies, and of course scrolling occurs when the page is wider than the width of the phone (viewport width).

  • A visual viewport is the size of the screen window we can currently see on a mobile phone.

  • First, the device zoom ratio, similar to what we see in a book with a magnifying glass, means we see more text and less content. Zooming out means we’re seeing a lot of text, just like here. For example, set the zoom ratio to 0.5, which means the phone can see four times as many pixels as before. We can set the zoom ratio of the viewport using the meta tag.

  • The ideal viewport is a device with a scale ratio of 1, so that the layout viewport and the visual viewport are equal in size and we don’t need to scroll through the scroll bar to see more hidden content. In general, we can set width=device-width to make the layout viewport equal to the visual viewport.

  • Flexible does one thing: set the font size for the root HTML node, because rem is the font size relative to HTML, and 1rem is the font size of HTML.

  • Older versions of Flexible did not set the viewport view, it dynamically set the viewport and also changed the set zoom ratio. This normally solves the adaptation problem, but it causes another problem: it destroys the CSS media.

  • CSS media query media values are actually set independent pixels. Changing the zoom ratio of the device will change the value of the independent pixels of the device. So Flexible optimizes this.

  • The new version of flexibs.js uses viewPort write death without dynamically changing meta and device scaling ratios. This avoids the above damage to media, but also a good solution to the adaptation problem. Added a feature to check whether 0.5px is supported.

  • Finally, REM units, rem units are essentially divided into ten equal widths of viewports (320px, 360px, 375px, 414px for ease of calculation). For example, 320px is divided into ten parts and 1rem = 32px, so when we write CSS, if the width of an element on the design is 64px, it’s actually 2rem.

  • However, for development efficiency, it is not possible to manually rotate REM for every size. Therefore, it is necessary to automatically transfer REM through the above four ways to improve the development efficiency.

This article refers to the following articles:

From the principle to the scheme, explain the web mobile terminal to achieve adaptive scaling step by step

H5 mobile multi-terminal adaptation full solution – from principle to scheme

Micro-site – Flexible. Js for mobile device adaptation

Here’s what you need to know about mobile adaptation

Taobao Flexible in-depth interpretation

How does big factory do mobile terminal adaptation