The thing about screen fitting in the development of WebApp

Small series recently in the study of hybrid app development, one of the problems is that the different mobile phone screen needs to be adapted. After reviewing the relevant information to do some summary, I hope that everyone can help.

First we need to understand some basic concepts, what is physical pixels, device independent pixels, device pixel ratio, and so on. Here I will not explain to you, recommend to everyone a connection, write very nice. Mobile high-definition, multi-screen adaptation scheme

OK, understand the basic concepts, and then provide you with several adaptation methods: first, use REM to do the matching

As we all know, REM is the font-size value of the root node HTML as the base size of the entire page, the default HTML font-size is 16px, that is 1rem=16px, if the div width is 32px, you can set to 2rem. When we set the HTML Font-size to 20px, 1rem=20px, then 32px=1.6rem, So what we're going to do is to dynamically change the font-size size (base value) of the root node HTML for different phone screen sizes and DPR (device pixel ratio). Here's a formula:

REM = Document . documentelement . clientwidth * DPR / Ten

Description

1. Multiply DPR because the page is likely to be scaled (scale) 1/DPR times in order to implement 1px border pages (if not, dpr=1). (If you do not understand, please look at the above link to understand the basic concept)

2. Divided by 10, is for rounding, convenient calculation (theoretically can be any value)

So just like the following, the HTML font-size may:

IPHONE3GS:320PX/10 = 32px

IPHONE4/5:320px * 2/10 = 64px

iphone6:375px * 2/10 = 75px

It may be a bit hard to understand, let me explain to you what we are going to do.

We take iphone5 as an example, the mobile phone screen width is 320*2=640px. We divide it into 10 parts to get the Font-size benchmark value rem=640/10=64px

the picture on the right is the visual manuscript, the visual manuscript is the front-end development, the artwork to our PSD file, we want to according to the Visual manuscript layout of the style. In order to be able to adapt to different mobile phone screens, we will also divide the design manuscript into 10 parts, get each rem=75px. After that, two figures have the same number of REM after conversion, although they are different in width. Finally we convert all px in the visual image to Rem, and in the HTML page we use REM instead of setting a specific PX value for a property.

It is also very easy to convert the dimensions of the elements on the visual manuscript, just by dividing the original PX value by the REM reference value. For example, the picture in the proportional visual manuscript, whose size is 176px*176px, is converted to REM as 176/75=2.34667, which is the size of 2.34667rem*2.34667rem. When we write the front-end only need to set the width and height of the picture is 2.34667rem, is not very convenient.

But... The problem is not over, we need to set an appropriate font-size for HTML. That's the REM value, that's key. Small series collected some information on the internet there are two ways to achieve, one is the CSS way, one is the JavaScript way. Interested comrades can consult the relevant materials, here do not repeat.

However, the small series found a better way to use the Ali hand Amoy Team Lib-flexble Library, this library is used to solve the H5 page terminal adaptation. Click here to download the relevant documentation

How to use: The Lib-flexible Library is very simple to use, just add the corresponding flexible_css.js,flexible.js file in the

The first method: Download the file to your project and add it through a relative path:

    <script src= "Build/flexible_css.debug.js" ></script>
    <script src= "Build/flexible.debug.js" > </script>

The second method: directly loading Ali CDN file

    <script src= "Http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js" ></script>

As a result, the elements in the page can be set in rem units, and they will be designed according to the font-size value of the HTML element, thus enabling the screen to fit. If you want to delve into flexible please poke here.

(The ps,flexible is to divide the visual manuscript into 10 parts, i.e. the denominator in the formula above is 10)

After referencing the file, convert the PX in the visual to REM and apply it directly in your style. Because flexible has set the size of the font-size for us. This method is simple, practical, only need to add one or two lines of code.

Similarly, if there is no such a good condition, there are art mm for us to design visual manuscript. We can also use this method to set a font-size base value for HTML, and then to adapt according to this benchmark value, the same reason as above, just need you to design the layout.

One more thing to note here: The text font size is not recommended for REM use.

The original requirement for the designer was this: the font size of any mobile phone screen should be uniform. The text size we want to see is the same, so it's decided that REM doesn't fit on the paragraph text in the production H5 page. So in flexible the entire adaptation scenario, consider the text or use PX as the unit. Just use the [DATA-DPR] property to differentiate the font size of text under different DPR.

div { 
     width:1rem;
     Height:0.4rem; 
     font-size:12px; By default, the DPR is 1 fontsize 
} 
[data-dpr= "2"] div {
     font-size:24px; 
} 
[data-dpr= "3"] div {
     font-size:36px; 
}

Of course, this is only for descriptive text, such as paragraph text, but sometimes the text size also need to sub-scene, such as in the project has a slogan, the business side hope that this slogan can be adapted according to different terminals, for this scenario, can use the REM unit of measurement.

Mobile layout, in order to adapt to a variety of large-screen mobile phones, the best solution is to use relative unit Rem.

And then we'll add some other ways.

Second, the use of meta-tag method in theory, the use of this label can be adapted to all sizes of the screen, but the device of the explanation of the label and the degree of support is not compatible with all browsers or systems.
Let's take a look at the meaning of the tag:

<meta name= "viewport" content= "width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no "/>

The width of the content in this section refers to the breadth of the virtual window. After understanding the width, to follow the various scale, you should know who is the proportion of the virtual window width/page width, so there will be problems, the size of the Android device is very large, the main light is 320, 480, 720, 1080 and other dimensions and the above label can only support one size, Of course some browsers will automatically zoom to adapt to the screen, but this is not a unified standard, the correct way is to use JS dynamic generation of this tag, of course, you should first get the screen size. JS Core code:

var phonewidth = parseint (window.screen.width);
var phonescale = phonewidth/750;
var ua = navigator.useragent;
if (/android (\d+\.\d+)/.test (UA)) {
var version = parsefloat (regexp.$1);
if (version>2.3) {
document.write (' <meta name= "viewport" content= "width=750, Minimum-scale = ' +phonescale+ ' , Maximum-scale = ' +phonescale+ ', target-densitydpi=device-dpi ' > ');
} else{
document.write (' <meta name= ' viewport ' content= ' width=750, target-densitydpi=device-dpi ' > ');
}
} else {
document.write (' <meta name= "viewport" content= "width=750, User-scalable=no, target-densitydpi= device-dpi ">");
}

The percentage adaptation is a percentage of how much of the child element is relative to the parent element, such as the parent element's width is 100px, the width of the child element can be 60%, then the width of the child element is 60px, and if the parent element's width is changed to 200px, then the width of the child element is 120px;
So the body default width can be set to the screen width (the PC is the width of the browser), the descendants of the element by a percentage (or specify the size) on it, which is only suitable for the layout of simple pages, complex page implementation is difficult.


Four, CSS3 media query using CSS3 Media query can set different CSS style for different media, here "media" including page size, device screen size, such as we want to the width of more than 375px pages in the class= "content" elements of the style set, you can write,       @media screen and (min-width=375px) {. Content {styles}}; Mobile device display size Daquan CSS3 media query:

    @media screen and (min-width:212px) {/*213px display style LG Optimus one*/} @media screens and (min-width:319px) {/*320px Display style Apple 4/4s/5c/5s BlackBerry Z30 */} @media screen and (min-width:359px) {/*360px display style Sony z1*/} @media (min-device-width: 375px) and (MAX-DEVICE-WIDTH:667PX) and (-webkit-min-device-pixel-ratio:2) {/* compatible iphone6*/} @media screen and (mi N-WIDTH:383PX) {/*384px display style blackberry Z10 Google Nexus 6 LG Optimus g*/} @media screen and (min-width:399px) {/*399px display style Samsung GAL axynote*/} @media screen and (min-width:414px) {/*414px display style Apple 6plus*/} @media (min-device-width:414px) and (MA X-DEVICE-WIDTH:736PX) and (-webkit-min-device-pixel-ratio:3) {/* compatible iphone6+*/} @media screen and (min-width:423p x) {/*424px display style LG 4X */} @media screen and (min-width:479px) {/*480px display style Sony mt27i Xperia sola*/} @media screens and (min-width:539px) {/*640px display style Motorola DROID3/4/RAZR Atrix 4g*/} @media screen and (min-width:639px) {/*640px display style * /} @media screen and (min-width:640px) {/*640px above display style */} @media only screen and (min-device-width:1080px) and (-webkit-min-device-pixel-ratio:2.5) {/* Meizu * /} @media only screens and (min-device-width:1080px) and (-webkit-min-device-pixel-ratio:3) {/*mate7*/} @med
    IA (device-height:480px) and (-webkit-min-device-pixel-ratio:2) {/* compatible iphone4/4s */;}
 @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {/* compatible iphone5 */;}

Statement: Small series just started to write a blog, lack of experience, if there is any bad place to welcome you to criticize the ha. I will gradually improve the ...