Mobile phone-side page Adaptive Solution-rem Layout (advanced version, with source code example)

Turn from: 1190000007350680

A year ago I wrote a "mobile phone page Adaptive Solution-rem Layout", accidentally received a lot of friends attention and love. But with the passage of time, the scheme is outdated, so we introduce a more perfect solution--rem layout (advanced version) that I highly recommend.

Other than that:

• This scenario applies only to mobile web
• Article at the bottom of the FAQ fourth , the author has given a fairly convenient solution, welcome message exchange. (2017/9/9)

The program is quite simple to use, the following is the compressed native JS(only 1kb, the source code has been updated at the bottom of the article, 2017/5/3) in the HTML head tag can (note: Do not manually set viewport, the program automatically set you up)

<Script>!function(e) {functionT (a) {if(I[a])returnI[a].exports;varN=I[a]={exports:{},id:a,loaded:!1};returnE[a].call (n.exports,n,n.exports,t), n.loaded=!0, n.exports}varI={};returnT.M=e,t.c=I,T.P="", T (0)}([function(e,t) {"Use Strict"; Object.defineproperty (T,"__esmodule", {value:!0});varI=window;t["default"]=I.flex=function(normal,e,t) {vara=e|| -, 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 (""),Ten)>= the, P=Navigator.appVersion.match (/(iphone|ipad|ipod)/gi), S=I.devicepixelratio||1;p||D&&d[1]>534||C||(S=1);varu=Normal?1: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=normal? " 50px ": A/2*s*N+"px"},e.exports=t["default"]}]); Flex (false, -, 1);</Script>

Code principle

This is the Ali team's high-definition layout code, the so-called HD solution is based on the device screen DPR (device pixel ratio, also known as dppx, such as dpr=2, representing 1 css pixels from 4 physical pixel points) dynamically set HTML font-size, At the same time, according to the device DPR adjust the zoom value of the page to achieve high-definition effect .

What's the advantage?

• Simple referencing and easy layout
• Automatically set the most appropriate HD zoom based on the DPR of the device screen.
• Ensure the consistency of visual experience under different devices. (The old plan is that the larger the screen, the larger the element, the larger the screen, the more it looks)
• Effectively solve the real 1px problem on mobile (1px is the physical pixel on the device screen)

How to use

Important thing to say three times!
Not every place. Rem,rem only applies to fixed size!
Not every place. Rem,rem only applies to fixed size!
Not every place. Rem,rem only applies to fixed size!
In a significant number of layout scenarios (such as the bottom navigation element dividing the screen width and the large size element), you must use a percentage or flex to perfectly layout!
See "Mobile phone page Adaptive solution-rem Layout" Friends, should have some understanding of REM, here no longer repeat,
This scheme is also the default 1rem = 100px, so when you layout, you can completely according to the designer to write to your various sizes.
For example, if you take a certain button element length 55px, Width 37px, then you can write the style directly:

{   width: 0.55rem;    height: 0.37rem;}

REM Layout (Advanced Edition) Practical application

In order to let friends more clearly feel the great advantages of this program, the following is the source code and demo Application 1 (please browse the mobile phone or mobile mode better!) Practical Application 2 (please use the mobile phone or phone mode to browse the effect better!) Sample source Online Demo FAQ, novice very necessary to see (2017/1/19)

Many students of the program there are many misunderstandings caused by the use of various problems, here Unified reply.

1. Q: Why is the width of the mobile phone Web page 640 or 750, I have to get a 666 of it?

A: To be honest, of course, but for the sake of regulation, 640 or 750 is relatively appropriate.
Take the iphone 5s for example, its CSS pixel width is 320px, because of its dpr=2, so its physical pixel width is 320x2 = 640px, which is why, you cut a picture on 5s, open on the computer, its original width is the reason for 640px.
What about the width of the iphone 6? 375X2 = 750
What about the width of the iphone 6 sp? 414x3 = 1242
And so, can you now see why it is generally 640, 750 or even 1242? (really no discrimination Andro mean ...) ）

2. Q: The width is written in rem, there is no problem on the iphone6, there will be a transverse scroll bar on the iphone5, what solution?

A: Assuming that your width is 750, there may be an element with a width of 7rem (the default 1rem = 100px for the HD scheme). We know that the feature of the HD solution is almost perfect to restore, that is, you write a width of 7rem elements, then on the current mainstream mobile devices are 7rem. However, the iphone 5 has a width of 640, which is 6.4rem. Therefore, the horizontal scroll bar inevitably appeared.
What do we do? This is the safest way I'm recommending now: if the element's width is more than half the width (640 or 750 wide), use a percentage width, or flex layout, decisively. It's like setting the width of the image to 100%.

3. Q: Not 1rem = 100px, why did my code write a width of 3rem elements, on the computer side of the Google browser width only 150px?

A: First of all, the HD Solution code, again emphasize that our HD program code is based on the device's DPR dynamically set HTML font-size,
If the dpr=1 (such as the computer side), the HTML font-size is 50px, at this time 1rem = 50px
If dpr=2 (such as iphone 5 and 6), the HTML font-size is 100px, at this point 1rem = 100px
If the dpr=3 (such as the iphone 6 SP), the HTML font-size is 150px, at this time 1rem = 150px
If DPR is a different value, even if it is not an integer, such as 3.4, the DPR is directly multiplied by 50.

In other words, in general, our widths are either 640 or 750, whichever they correspond to the dpr=2 of the device, at which point 1 rem = 50x2 = 100px. This is why the HD scheme defaults to 1rem = 100px. The 1rem default 100px is also a lot of benefits, can help you quickly convert units, such as in the 750 width, an element width of 53px, then the CSS width is directly set to 53/100=0.53rem.

However, in rare cases, the designer will be set to 1242px, because he has only one iphone 6 sp (DPR = 3), the design just can be in his iphone 6 SP to see the adjustment. After all, he gave this to you to cut the picture. Due to the dpr=3 of the corresponding device, which is 1rem = 50x3 = 150px. So if you take an element with a width of 90px, its CSS width should be 90/150=0.6rem. Since our HD solution is 1rem=100px by default, you need to convert it in order to restore. Of course, one trick is that you can modify the default settings of our HD solution directly. At the end of the code you will see Flex (False, 100, 1) and modify it to flex (false, 66.66667, 1) (Thanks to Jianyo: v Travel points out the error here!) 2017/3/24) Not so troublesome conversion, at this time the 90px directly written 0.9rem can be.

4. Q: In this scenario, if I reference a different UI library, the elements of those UI libraries will be very small, how to solve?

A: It is possible to understand the cause of the problem, if you do not use the HD scheme, other elements of the UI library on the mobile device (assuming the device is the iphone 5 good) display is normal, this is not a problem, then we put the page on this device on the computer to see the width is 640 (answer 1 explained), Depending on your pixel eye, you find that a font size on this device should be 12px, and you should be measuring 24px on your computer.

Now we use the HD solution to restore this page, then the font size should be written as 0.24rem!

So, if you reference a different UI library, in order to be compatible with the HD solution, you need to do the same in the UI library where the PX is applied, namely: a px = a*0.02 rem
(The specific treatment method varies from person to person, has the modular development experience the classmate may use the similar Px2rem the plug-in conversion, may also complete manual processing)

* * (updated 2017/9/9) However, the real situation is often more complex, for example, you introduced Baidu maps (n styles need to handle conversions); or you introduced a
The framework, or you use the video tag, the default size style above is difficult to handle. Wait, these tricky questions * *

In the face of these situations, when our HD solution does not compress the page, then the above problems will be solved.
Based on this idea, the author of the high-definition program source code made the following changes, that is, add a parameter called normal, it is to control whether the page compression.
At the end of the article at the top of the code, you will see flex(false, 100, 1) that by default the page is turned on and compressed.

If you need to suppress compression, as our source code executes, directly attach the flex function to the Global Variables window, you can do it directly on the page that needs to suppress compression, window.flex(true) and the use of REM remains the same.

A little drawback is that if you prohibit page compression, HD screen 1 pixels can not be achieved, if you have to achieve 1 pixels, then Google: CSS 0.5 pixels, there are more than N solutions, here no longer repeat.

5. Q: Sometimes the word experience is not controlled to become larger, how to do?

A: In the X5 new kernel blink, in the typesetting page, will actively enlarge the font, will detect the main font in the page, when a piece of text in our decision rule, the font size is smaller, and is the main font in the page, will take the initiative to enlarge the operation. However this is not what we want and can be taken to the maximum height to solve

Solution:

{ max-height:}

Add: Some students reflect, in some cases textarea the font size in the label even with the above scheme, the font will become larger, uncontrollable. At this point you need to textarea display set table or you inline-table can return to normal. (Thanks Cheng meow for this supplement!) 2017/7/7)

6. Q: I feel more comfortable with the flex in the bottom navigation, is it OK to use this mixture?

A: Our REM is suitable for writing a fixed size. The rest is replaced by flex or percent as needed. In the source code example, there are three kinds of comprehensive use.

7. Q: Under the HD scheme, what should be a standard, more ideal page with a width of 640?

Click to browse: A standard 640 mobile phone page design reference (yes, in this scenario, you can write the layout exactly as it was written in this design.) It's so simple! ）

8. Q: Can you provide the source code for this HD solution?

' Use strict ';/** * @param {Boolean} [normal = false]-page compression is turned on by default to make the page HD; * @param {Number} [basefontsize = 100]-basic fontsize, default 100px; * @param {Number} [Fontscale = 1]-some businesses want to enlarge a certain proportion of the font; */Const WIN=Window;exportdefaultWin.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 ('), >= 80; Const Isios= Navigator.appVersion.match (/(Iphone|ipad|ipod)/gi); Let DPR= Win.devicepixelratio | | 1; if(!isios &&!) (Matches && matches[1] > 534) &&!isuchd) {    //If non-iOS, non-Android4.3, non-UC kernel, do not perform HD, DPR 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 ';};

9. Q: I encountered the problem of XXX when using the REM layout advanced scheme, how to solve?

• This scheme is well-proven, has a universal applicability, and its own fatal problem is rare, at least the author has not encountered.
• Most of the problems you encounter are caused by the lack of understanding of the REM layout. This article has made a lot of explanations for the REM layout and configured a number of demos so that you can put the questions you encounter in the demo and test them. When encountering a problem, first ask yourself, why this obvious mistake everyone did not meet, I met??
• If you are really fully validated, compared to the fact that the REM layout itself is out of the question, then please send me a private messages, to restore the problem scenario of the demo or file to me. Thank you!

Mobile phone-side page Adaptive Solution-rem Layout (advanced version, with source code example)