How to fit different screen size schemes for IOS turning front end __ios

Today, time to write a ~ before already done two demo, mainly using css+html completed, today or to complete a demo, build a pet website. Before we start, we'll introduce a knowledge point about adaptation.

In fact, for the front end of learning, H5 mobile phone fitness is also a cliché of the problem, of course, there are Daniel on the net to the solution, here I will combine their actual situation analysis of this adaptation problem. 

Foundation:

1.viewport

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

This is added between

Control Initial-scale This parameter can control scaling, while note that the value must be between Maximum-scale and Minimum-scale; user-scalable is used to prevent users from zooming in and out of the screen.

2.DPR (device pixel ratio)

dpr= physical pixel/device independent pixels, which can be obtained by window.devicepixelratio on the page.

Device independent pixels are the width of the screen, such as Iphone6 for 365px,iphone 320px.

The physical pixel is the number of pixels on the screen.

The image above is dpr=2, for example, a mobile phone screen width is 360px, but the horizontal direction of the number of pixels reached 720, the pixel is the smallest display color units, that is, a 1px inside the horizontal direction of two pixels.

3.rem

REM is a unit of CSS, the HTML style in the Font-size value of 1rem, we generally have the screen width of 1/10 as 1rem, such as the screen width of 375px, then 1rem=37.5px; 

Start:

Now let's try, according to the UI to our diagram, see how to fit. => REM Fitting

Just as drawing begins with strokes, as soon as we get the design, we have to get the approximate structure and framework out, which uses the REM point of knowledge mentioned above.

It says 1/10 of the width of the 1rem= screen, but this value is for us to set, set the code as follows:

Document.addeventlistener (' domcontentloaded ', function () {
    //Set the 1/10 of the rem,1rem= screen width;
    var rem = DOCUMENT.BODY.CLIENTWIDTH/10;
    Document.queryselector (' HTML '). style.fontsize = rem + ' px ';
});

We look at the design draft can see the size of the picture is 176*176, then we are in the page to set how much.

The principle is this: we first assume that the design is a phone screen, the width of the screen = 750, then for the design, 1rem=75px; so 176px=176/75=2.34rem; So, on the page, we need to write 2.34rem instead of 176px;

By the same token, you can convert all the width annotations into REM so that you can build up the approximate frame. Of course, there are some tools and so on, can automatically convert PX into REM, interested in the words can find their own. 

Fitting Scheme:

In fact, as long as the above basically completed a large part of the, then why should an appropriate formula case?

I do not know if you have found that the above example viewport I use the initial-scale=1.0, so there is no problem, but above we also talked about a little, called DPR, mainly for example, the iphone's HD Retina screen, Their DPR is relatively high, so there will be a problem showing 1px.

The image above shows 1px in dpr=2 (for example, Iphone6), because 1px has two pixels, so the high DPR feature is not fully exploited, and some designers want 1 to be a pixel, not 1px, which is the image below.

So there will be more famous flexible.js, this is Taobao used to the screen adaptation scheme, the use of this is. The principle is also very simple, is to get DPR by Window.devicepixelratio, and then Initial-scale set to 1/DPR, is to reduce the overall screen DPR times. => flexible.js Scheme

1. You want to use flexible this package to note that <meta name= "viewport content=" Width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no "/> This sentence, because its code will detect whether you add this sentence, if added, it will not control."

2. Also note that the font, because the screen is reduced, the font is reduced, so to enlarge the font, as follows:

Html[data-dpr= ' 1 '] body{
    font-size:12px
}
        
Html[data-dpr= ' 2 '] body{
    font-size:24px
}
        
Html[data-dpr= ' 3 '] body{
    font-size:36px
}

Of course, if this is more cumbersome to add, we can also use SASS tools such as late batch modification. (notice here that the font is not REM-controlled, as you'll see later.) ) 

programme selection:

The above scheme is very perfect ah, very good ah, and is used for Taobao, that also choose what, with Flexible.js program is not good ...

In fact, I began to use the Flexible.js scheme, but this program is problematic, the crux of the problem is 1px.

Above the left is the Flexible.js scheme (fonts do not fit, do not consider the font problem), the right is no use of flexible.js scheme.

Although is satisfying the designer's tricky eye, achieves the 1 pixel border, but this kind of experience really is good, the user can hardly see the border, too thin, looks very laborious.

So at this time, the general plan instead took advantage.

This time some people will say, the Flexible.js solution uses reduces the way to be possible to improve the picture the true degree, does not distort.

But that's not actually the case, because the images we display are either REM or a percentage of the width or height, and the decision to show the true degree of the image is the number of pixels in the display screen in this area, scaling does not affect the pixel of this area, because the size of the region has not changed.

So basically, using the flexible.js solution is basically because the UI designer has an obsessive problem with 1px problems ...

But Flexible.js also did something else, such as adapting to the ipad, not allowing the screen to be wider than 540px (because an infinite magnification would cause a disproportionate amount of confusion), as shown below.

To sum up, we do not use flexible.js to reduce the screen of the scheme, the use of 1:1-screen scheme, while the use of flexible.js other solutions. => Integrated Programme

The integrated scheme adds <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, compared to the flexible.js scheme. minimum-scale=1.0, User-scalable=no "/>, because Flexible.js detects you use scale, uses your scale, does not shrink the screen according to DPR, and removes the CSS that is magnified by the font, It's actually getting easier. 

Font fit:

In fact, if the font with REM fitness can ensure that the design version of the perfect scaling, but you imagine, if the font with REM, in the pad although the overall unchanged, but the word becomes huge, it looks very scary.

(Left is font rem effect on pad, right is font px effect on pad)

That font can not use REM, but I think the font in the pad on the smaller how to do. In fact, generally speaking, Taobao, the cat has no action on the font, their words in the big screen mobile phone is relatively small, but there will be some special circumstances, such as we are, our users are older, so our word in the big screen mobile phone is to slightly enlarge some of the.

This time is going to use the turn to @media debut.

Media inquiries are generally used to do the PC and mobile phone screen content adaptive, where we use to do font scaling.

In fact, the difficulty of media query is how to divide the screen width, from 300-540, how to divide, how to classify, this is to be based on the specific circumstances of the analysis.

I'm going to simply divide it by 400,500, Iphone5,iphone6,iphone6s uses the <400 scheme, plus uses the 400,500 program, the ipad uses the >500 program

@media (max-width:400px) {}
@media (min-width:400px) and (max-width:500px) {}
@media (min-width:500px) {}

=> Font Fitting

(PX on the left is normal on the pad display, the right is PX media query on the pad display).

It's a little bit bigger than normal. If you feel large or small, you can adjust the media query to achieve your results.

Of course, write this media query is also more troublesome, this you can through sass or less to write some general template, this is waiting for you to grope, here is just to provide you with a train of thought.

For the line-height of the font, this uses REM or PX. In fact, you can see the actual situation, such as a div height of 1rem, you can set Line-height:1rem to achieve vertical vertical center effect. 

So how do you fit into the mobile end of the display?

This set of basic library mobile end adaptation scheme, using the mobile phone Taobao team Flexible.js, specific can see the desert Teacher's article: the use of flexible to achieve hand Amoy H5 page terminal adaptation, where I simply introduced its working principle.

The first thing to understand is Rem,rem refers to the unit of the font size relative to the root element. Simply put it is a relative unit, of course this may make you think of EM, but EM is relative to the parent element, and REM is relative to the root element.

For example, let's understand the difference between EM and REM.

/* HTML element *
    /html {
        font-size:100px
    }

    * * HTML child element
    /body {
        font-size:0.8em;     100px * 0.8 = 80px
        Font-size:0.8rem;    100px * 0.8 = 80px
    }

    //* The child element of the body *
    /div {
        font-size:0.8em;//100px * 0.8 * 0.8 = 64px
        Font-si Ze:0.8rem; 100px * 0.8 = 80px
    }

Then let's look at the flexible.js principle.

The principle of flexible.js is to set the font-size of an HTML element based on the width of the screen, by calculating the width of the screen and dividing it by 10, assigning the Font-size attribute to the HTML tag.

As an example:

If the width of the screen is 750px,flexible.js, the HTML font-size will be set to 75px.

Then we write the attributes of all the elements (margin, padding, width, height, etc.) in rem,

Likewise, give an example:

If the width of the screen is 750px,flexible.js set HTML Font-size to 75px, a button in the 750px design under the width of 150px, we will write the style of this button:

. btn {
    width:2rem;//150px/75px = 2rem;
}

Assuming the screen width is now switched to 640px, Flexible.js sets the HTML font-size to 64px, and the width of the button in 640px is actually the same as 2rem * 64px = 128px

Let's take a look at:

150px/750px = 128px/640px = 1/5

We will find that the width of this button is unchanged relative to the screen in different screen sizes, so that the UI elements can be changed to match the size of the screen to fit.

Finally, to illustrate, the above is just an example, the actual situation is slightly different:

The above algorithm only occurs when the screen width is less than 540px, in order to avoid the situation when the UI element is too large in the widescreen, the HTML font-size is kept 54px unchanged when greater than 540px.

First of all, the next will be a demo to the actual use.