unscramble

1. Why is the width of the mobile page rendering 640 or 750?

To be honest, of course, but for the sake of specification, 640 or 750 is relatively appropriate.
Take the Iphone 5s for example. Its css pixel width is 320px. Because its dpr=2, its physical pixel width is 320 × 2 = 640px, which is why you cut a picture in 5s and open it on the computer. Its original width is 640px.
What about the screenshot width of iphone 6? three hundred and seventy-five × 2 = 750
What about the screenshot width of iphone 6 sp? four hundred and fourteen × 3 = 1242
By analogy, can you understand why the renderings are generally 640750 or even 1242

2. When the width is written in rem, there is no problem on iPhone 6. There will be a horizontal scroll bar on iPhone 5. What's the solution?

Assuming that the width of your rendering is 750, there may be an element with a width of 7rem (1rem = 100px by default in HD scheme). As we know, the feature of the HD solution is to restore the rendering almost perfectly, that is, if you write an element with a width of 7rem, it is 7rem on the current mainstream mobile devices. However, the width of the iphone 5 is 640, or 6.4rem. So the horizontal scroll bar inevitably appears.
What shall I do? This is the safer way I currently recommend: if the width of the element is more than half the width of the rendering (the width of the rendering is 640 or 750), use the percentage width or flex layout decisively. It's like setting the width of a picture with equal screen width to 100%.

3. Isn't 1rem = 100px? Why does my code write an element with a width of 3rem, which is only 150px on Google browser on the computer side?

Let's talk about the HD scheme code first. Again, our HD scheme code dynamically sets the font size of html according to the dpr of the device,
If DPR = 1 (such as computer side), the font size of html is 50px, and 1rem = 50px at this time
If DPR = 2 (such as iphone 5 and 6), the font size of html is 100px, and 1rem = 100px
If DPR = 3 (such as iphone 6 sp), the font size of html is 150px, and 1rem = 150px
If dpr is other values, even if it is not an integer, such as 3.4, it is the same. Directly multiply dpr by 50.
Let's talk about the renderings. Generally speaking, the width of our renderings is either 640 or 750. No matter which one, their corresponding DPR of the device is 2. At this time, 1 rem = 50 × 2 = 100px. This is why the HD scheme defaults to 1rem = 100px. The default of 1rem to 100px also has many advantages. It can help you quickly convert units. For example, in the effect drawing with 750 width, if the width of an element is 53px, then the css width is directly set to 53/100=0.53rem.
However, in rare cases, a designer sets the width of the rendering as 1242px, because he has only one iphone 6 sp (dpr=3). After designing the rendering, he can just view and adjust it in his iphone 6 sp. After everything is finished, he will give you the renderings to cut. Because the DPR of the device corresponding to this effect diagram is 3, that is, 1rem = 50 × 3 = 150px. So if you measure an element with a width of 90px, its css width should be 90/150=0.6rem. Since our HD scheme defaults to 1rem=100px, in order to restore the effect picture, you need to convert it like this. Of course, one trick is that you can directly modify the default settings of our HD scheme. At the end of the code, you will see flex(false, 100, 1). If you change it to flex (false, 66.667, 1), you don't have to make such a troublesome conversion. At this time, the 90px can be written directly as 0.9rem.

4 under this scheme, if I reference other UI libraries, the elements of those UI libraries will appear very small. How to solve it?

The reason for the problem can be understood in this way. If the HD scheme is not used, the elements of other UI libraries are displayed normally on the mobile device (assuming that the device is iphone 5), which is no problem. Then we put the screenshot of the page on the computer and found that the width is 640 (explained in question and answer 1). It is roughly measured according to your pixel eye, You find that a font size on this device should be 12px, while you measure it on the computer should be 24px.

Now we use the HD scheme to restore this page, so the font size should be written as 0.24rem! Therefore, if you refer to other UI libraries, in order to be compatible with HD solutions, you need to deal with all px applications in the UI library, that is: a px = > A * 0.02 rem
(the specific processing methods vary from person to person. Students with modular development experience can use a similar px2rem plug-in to convert or handle it completely manually)

For example, you introduced Baidu map (N styles need to be processed and converted); Or did you introduce one
framework； Or if you use the video tag, the default size style above is difficult to deal with. Wait, these thorny issues
In the face of these situations, if our HD scheme no longer compresses the page, the above problems will be solved.
Based on this idea, the author has made the following modifications to the source code of the HD scheme, that is, add a parameter called normal to control whether the page is compressed or not.
At the end of the code at the top of the article, you will see flex(false, 100, 1). By default, the page is compressed.
If you need to disable compression, because after the execution of our source code, we directly mount the flex function to the global variable window. At this time, you can directly execute window on the page where compression is prohibited Flex (true) is OK, while the usage of rem remains unchanged.
One drawback is that if page compression is prohibited, 1 pixel of high-definition screen can not be realized. If you have to realize 1 pixel, Google: css 0.5 pixels has more than N solutions, which will not be repeated here.

5 sometimes the font will grow out of control. What should I do?

In the X5 new kernel Blink, when composing a page, it will actively enlarge the font and detect the main font in the page. When a font is considered small in our judgment rules and is the main font in the page, it will take the operation of active enlargement. However, this is not what we want and can be taken to the maximum height

*, *:before, *:after { max-height: 100000px }

In some cases, even if the above scheme is added to the font size in the textarea tag, the font will become larger and cannot be controlled. At this time, you need to set the display of textarea to table or inline table to restore normal

6. I think the flex used for bottom navigation is more suitable. Can I mix it like this?

rem is suitable for writing fixed size. The rest can be changed into flex or percentage as needed

7. How to use media query with this scheme?

Generally speaking, there is no need to use media query when using this scheme. If you have to use it, suppose you want to use iPhone 5 (css) with a pixel width of 320px,
Here, you need to take the class name under the width of its physical pixel, that is, 640) for processing

@media screen and (max-width: 640px) {
    .yourLayout {
        width:100%;
    }
}

HD solution source code

'use strict';

/**
 * @param {Boolean} [normal = false] - Page compression is enabled by default to make the page HD;  
 * @param {Number} [baseFontSize = 100] - Basic fontSize, 100px by default;
 * @param {Number} [fontscale = 1] - Some businesses want to enlarge a certain proportion of fonts;
 */
const win = window;
export default win.flex = (normal, baseFontSize, fontscale) => {
  const _baseFontSize = baseFontSize || 100;
  const _fontscale = fontscale || 1;

  const doc = win.document;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  let dpr = win.devicePixelRatio || 1;
  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
    // If not iOS, not Android 4 Above 3, if it is not UC kernel, HD will not be executed, and dpr is set to 1;
    dpr = 1;
  }
  const scale = normal ? 1 : 1 / dpr;

  let metaEl = doc.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
  doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};

rem layout

! function(e) {
    function t(a) {
        if (i[a]) return i[a].exports;
        var n = i[a] = {
            exports: {},
            id: a,
            loaded: !1
        };
        return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
    }
    var i = {};
    return t.m = e, t.c = i, t.p = "", t(0)
}([function(e, t) {
    "use strict";
    Object.defineProperty(t, "__esModule", {
        value: !0
    });
    var i = window;
    t["default"] = i.flex = function(e, t) {
        var a = e || 100,
            n = t || 1,
            r = i.document,
            o = navigator.userAgent,
            d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
            l = o.match(/U3\/((\d+|\.){5,})/i),
            c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
            p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
            s = i.devicePixelRatio || 1;
        p || d && d[1] > 534 || c || (s = 1);
        var u = 1 / s,
            m = r.querySelector('meta[name="viewport"]');
        m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
    }, e.exports = t["default"]
}]);
flex(100, 1); 

Not recommended

    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);