Mobile End Web Adapter __web

Mobile-side web adaptation I know a total of 4 ways:

Fixed Width
Set dead page width, write a div directly to the width of the design draft or the width you need, then let it center, and then in this div box for your page development, the disadvantage of this development is that when the larger screen, the two sides of the screen will flow out of the white side, affect the beautiful, bad experience.

percent width

Using Media queries
But the media query is generally for several mainstream resolution customization, user experience can not say how good, after all, in some resolution of the moment, the layout will suddenly change. Rem+viewport
By using the dynamic calculation of REM units the elastic layout. Here is a detailed description:

First of all, when you do the development of mobile end will add viewport:

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

Name= "Viewport" is to tell the browser that the meta attribute is to set the device viewport content= "" is the specific content of the set viewport Width=device-width This code tells the browser, the width of the page, such as the current device's viewport width, Initial-scale=1, represents the initial page scaling ratio of 1, minimum-scale=1 represents the minimum scale of 1, maximum-scale=1 represents the maximum scale of 1 user-scalable= No means that the user does not allow manual scaling.

But it will be like the Retina screen of the appearance of High-definition, he will be the size of the canvas to enlarge to twice times, that is, now I write the CSS 1px on the screen shows the width of 2px.

To still display a 1px border on the screen, you can only shrink the page by setting the scale to 0.5:

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

Here is a term: scaling ratio , JS can be obtained by Window.devicepixelratio. For example, the DPR of the retina screen mentioned above is 2, so our zoom ratio is set to 1/2. So we're going to get the DPR of the device dynamically and set meta:

var DPR = 1/window.devicepixelratio;
Meta.setattribute (' content ', ' initial-scale= ' + DPR + ', maximum-scale= ' + DPR + ', minimum-scale= ' + DPR + ', User-scalab Le=no ')

To solve the problem of pixel display, the next step is to use REM for layout.
rem is the font size of the root element, and all other layout dimensions are laid out using REM.

For example, we now set the HTML element's font-size to 16px:

html{
    font-size:16px;
}

So at this point the 1rem = 16px. The widths of other elements that need to be fitted are defined using REM:

#element {
    width:10rem;
    Height:10rem;
}

Then the width of the element is 160px, which enables you to configure the size of the element according to REM.

So how to achieve adaptation.
Since all the elements and font sizes are determined by REM, we need to set the REM size according to the screen width, so that the page will fit with the width of the screen.

Generally we use a certain screen as a reference, such as we get the design of the width of 375px, which is iphone6 screen width. At this point we set a REM reference value, such as width/10:

rem = WINDOW.INNERWIDTH/10;

At this point the Rem datum value is 37.5px.
If the size of an element in the design is 90px, then we need to do a conversion, 90px to how much rem.

90/37.5 REM

At this point we are going to set the size of this element to 90/37.5 Rem.

So the computational process is to calculate the REM size of other elements by calculating the REM datum based on the page width.

In general, we can use SASS to complete the process of PX conversion to REM:

@function Px2rem ($px) {
    $rem: 37.5px;
    @return ($px/$rem) +rem;

In this way, when we write a specific number of values can be written as:

#element {
    height:px2rem (90px);
    Width:px2rem (90px);
}

For projects that do not use sass, you can set the HTML font-size to 100px so that the PX size is divided by 100 directly when you write the unit.

According to the standard 375px design, we have completed the PX to REM conversion, so relative to the other screen adaptation has also been completed. REM is screen width/10, and all element sizes are also REM-annotated, which enables the adaptation of different screen widths.

So how do we set the REM size dynamically for different screens? There are generally two ways: media inquiries

@media (min-device-width:375px) and (MAX-DEVICE-WIDTH:667PX) and (-webkit-min-device-pixel-ratio:2) {
      html{font- SIZE:37.5PX}
}

JS Dynamic Settings

Document.getelementbytagname (' HTML ') [0].style.fontsize = WINDOW.INNERWIDTH/10;

When you use JS to set up, you need to bind the page resize event to update the HTML font-size when the changes are reached.

To sum up the steps for REM adaptation: Set the Rem datum according to the design draft and set the REM size of each element (px to REM) JS dynamically sets the REM size according to the screen width, which is typically bound resize events

Thus, REM layout needs to be embedded in the head for a period of time to monitor changes in screen resolution, thus dynamically changing the root element font size. This way makes CSS and JS coupled together. use VW, VH for layout
100VW is the viewport width, 100VH is the viewport height.

We can use VW as the only CSS unit.
1. For design draft size conversion to VW units, you can use SASS compilation.

IPhone 6 Size As a design draft benchmark
$VW _base:375;
@function 2VW ($px) {
    @return ($px/$VW _base) *100VW
}

2. Convert text, layout, and other dimensions to VW as a unit:

html{
    FONT-SIZE:2VW (10px);
}
div{
    WIDTH:VM (40);//Width
    HEIGHT:VM (40);//Height   
}

At the end of the screen for the high definition of some of the border to show 1px requirements, using the Transform property scale implementation

. box{@media only screens and
    (-webkit-min-device-pixel-ratio:2) {
            -webkit-transform:scaley (0.5);
            -webkit-transform-origin:50% 0%;
        }

Such a page, although it seems to fit well, but you will find that because it is the use of viewport units to achieve the layout, depending on the size of the viewport and automatic scaling, regardless of whether the viewport is too large or too small, it also with the viewport too large or too small, lost the maximum minimum width of the limit.

so you can consider the way REM and VW are combined :
1. Set the font size of the root element to a VW unit that changes as the viewport changes, so you can change its size dynamically.
2. Limit the maximum minimum value of the root element font size, with body plus maximum width and minimum width

$VM _fontsize:75; The IPhone 6 size base value of the root element

$VM _design:750;
HTML {
    //font-size size of the root element dynamically based on the viewport width
    font-size: ($VM _fontsize/($VM _DESIGN/2)) * 100VW; 

    Also, limit the maximum minimum value of the root element through media Queries @media screen and
    (max-width:320px) {
        font-size:64px;
    }
    @media screen and (min-width:540px) {
        font-size:108px
    }
}

Converts all dimension units to VW functions
@function REM ($px) {
     @return ($px/$VM _fontsize) * 1rem) according to the design draft

Reference articles
Pure CSS3 using VW and VH viewport units to achieve adaptive