Adaptation of Mobile End interface

How to read the matching requirements of the catalogue, 3 steps the principle analysis of matching the background picture in the matching

Absrtact: In the mobile interface of the writing, if the width of the height or font size all written dead, then on all mobile phones see the same size, the problem is the same size of the font, or a box model,

It looks a little bit small on a big-screen phone. Like Iphone6plus. If it is made to fit, it will be a good solution to this problem, large screen display a little bit larger, small screen display smaller.

So today is a small summary of the adaptation of a mobile end page

Back to the top fit requirements

1, in the different resolution of the mobile phone, the page appears to be adaptive. The overall effect looks more harmonious. Wouldn't say the big screen looks particularly small. It looks really big on a small screen.

2, mainly focus on the font, wide, spacing, picture size and so on.

3, the design is generally provided by the mobile phone resolution of twice times, to facilitate the adaptation.

4, use REM to do the unit, not the traditional PX

Back to the top fitting method, 3 steps

Step 1:

Set viewport, which is usually written on the mobile side of the page should be added:

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

Step 2,

First we introduce the following flexible.js on our page,

This adaptation of the JS code is to take Taobao to use.

The appropriate JS code GitHub address is as follows: Https://github.com/amfe/lib-flexible/blob/master/src/flexible.js.

Step 3,

Our CSS code on the page can be written like this, such as the size of the design map to us is 750*1000. A container in the width of the design diagram is 150px*225px, then we are in the CSS

Width: 150px/750px/10=150px/75px=2rem;

Height is: 225px/75px=3rem;

In a word: layout, the CSS dimensions of each element = Design Draft dimension/design Draft horizontal resolution/10;

div{
    Width:2rem;
    Height:3rem;
}

With the 3 steps above, we can make our mobile end page fit.

CSS Conversion method

But there is a point, always count to be very annoying. Therefore, when writing CSS, it is best to use CSS preprocessor, such as sass, less to write, so much more convenient.

or install the Cssrem plugin in the SUBLIMETEXT3, write the PX unit normally, and then the editor automatically converts you into REM.

Installation tutorials for Cssrem Plug-ins: Https://github.com/flashlizi/cssrem

Note the point:

Height of container width we use REM as the unit, but the font size font-size we still use PX instead of REM

Reason:

Flexible.js author Winter This explanation: Considering the font of the lattice information, the general text size will be used 16px 20px 24px equivalent, if the REM specified text size, will produce such as 21px,19px value, will lead to ugly, Burr, even black block, Therefore, most of the text should be set in PX.

General Title class text, may also be required to zoom with the screen, and given that such text is generally relatively large, more than 30px, you can also set the font with REM.

So how to use the font? Here's an example I wrote with sass:

Write a macro
@mixin FONT-DPR ($font-size) {
    font-size: $font-size;
    [data-dpr= "2"] & {
        font-size: $font-size * 2;
    }
    [data-dpr= "3"] & {
        font-size: $font-size * 3;
    }
}

Element
{
    @include FONT-DPR (16px) is called in the

Paste the following flexible.js source code: added a note

Flexible.js

;(function (Win, Lib) {var doc = win.document;
    var docel = doc.documentelement;
    var Metael = doc.queryselector (' meta[name= ' viewport "]);
    var flexibleel = doc.queryselector (' meta[name= ' flexible "]);
    var DPR = 0;
    var scale = 0;
    var Tid; var flexible = Lib.flexible | |
    
    (lib.flexible = {});
        if (Metael) {Console.warn (' will set scaling based on existing meta tags '); var match = Metael.getattribute (' content '). Match (/initial\-scale= [\d\.]
        +)/);
            if (match) {scale = parsefloat (match[1]);
        DPR = parseint (1/scale);
        } else if (Flexibleel) {var content = Flexibleel.getattribute (' content '); if (content) {var INITIALDPR = Content.match (/initial\-dpr= ([\d\.]
            +)/); var MAXIMUMDPR = Content.match (/maximum\-dpr= ([\d\.]
            +)/);
                if (INITIALDPR) {DPR = parsefloat (initialdpr[1]);    
            Scale = parsefloat (1/DPR). toFixed (2));
          }  if (MAXIMUMDPR) {DPR = parsefloat (maximumdpr[1]);    
            Scale = parsefloat (1/DPR). toFixed (2));
        }} if (!DPR &&!scale) {var isandroid = Win.navigator.appVersion.match (/ANDROID/GI);
        var isiphone = Win.navigator.appVersion.match (/IPHONE/GI);
        var devicepixelratio = Win.devicepixelratio; if (Isiphone) {//iOS, for 2 and 3 screens, use twice times the scheme, the rest with 1 time times the scheme if (Devicepixelratio >= 3 && (!DPR | | d
            PR >= 3)) {DPR = 3;
            else if (Devicepixelratio >= 2 && (!DPR | | DPR >= 2)) {DPR = 2;
            else {DPR = 1;
        } else {//Other devices, still using 1 time-fold scheme DPR = 1;
    } scale = 1/DPR;
    ///Add DATA-DPR attributes to HTML tags docel.setattribute (' data-dpr ', DPR);
        if (!metael) {Metael = doc.createelement (' meta '); Metael.setattRibute (' name ', ' viewport '); Dynamically set meta Metael.setattribute (' content ', ' initial-scale= ' + scale + ', maximum-scale= ' + scale + ', Minimum-sca
        Le= ' + scale + ', User-scalable=no ');
        if (docel.firstelementchild) {docEl.firstElementChild.appendChild (Metael);
            else {var wrap = doc.createelement (' div ');
            Wrap.appendchild (Metael);
        Doc.write (wrap.innerhtml);  The REM function Refreshrem () {//getboundingclientrect () is set according to DPR and physical pixels. Width is equivalent to the physical pixel var width
        = Docel.getboundingclientrect (). width;
        WIDTH/DPR > 540 equals independent pixel if (WIDTH/DPR > 540) {width = 540 * DPR;   var rem = WIDTH/10;  The screen width is divided into 10 parts, and the 1 parts are 1rem.
        REM Conversion px Formula =d* (WIDTH/10) docEl.style.fontSize = rem + ' px ';
    Flexible.rem = Win.rem = REM;
        //Monitor window changes, reset dimensions win.addeventlistener (' Resize ', function () {cleartimeout (TID); TID = sEttimeout (Refreshrem, 300);

    }, False);
            When the page is loaded, determine if it is a cache, and if it is cached, execute Refreshrem () win.addeventlistener (' Pageshow ', function (e) {if (e.persisted) {
            Cleartimeout (TID);
        Tid = settimeout (Refreshrem, 300);

    }}, False);
    if (doc.readystate = = ' complete ') {doc.body.style.fontSize = * DPR + ' px '; else {doc.addeventlistener (' domcontentloaded ', function (e) {doc.body.style.fontSize = ' DPR + '
        PX ';
    }, False);

    } refreshrem ();
    FLEXIBLE.DPR = WIN.DPR = DPR;
    Flexible.refreshrem = Refreshrem;
        flexible.rem2px = function (d) {var val = parsefloat (d) * THIS.REM;
        if (typeof d = = ' String ' && D.match (/rem$/)) {val = ' px ';
    return Val;
        } Flexible.px2rem = function (d) {var val = parsefloat (d)/this.rem;
        if (typeof d = = ' String ' && D.match (/px$/)) {val = ' rem ';
}        return Val; }) (window, window[' lib '] | | (window[' lib '] = {}));

Back to the top fit in the background image processing

1. How to use Background-size

Because it is the use of REM to do units, we write the moving side of the background map, the general use of background-size to control the size, how to convert it.

Conversion units are as follows:

The size of the background-size= background chart/width of the design chart *10

For example: My background image is 16*18, and the design is based on the width of 640. So my background-size value is

Background-size:16/640*10rem 16/640*10rem is also background-size:0.25rem 0.28125rem;

After this control, our background map also achieves the effect of matching

2, Sprite Map of the adaptation ....

At the beginning of the adaptation, there is one thing is more headaches, that is, Sprite map adaptation, mainly background-size and background-position configuration is more annoying. So how to do in the use of fexible.js when the snow blue map, the method is as follows:

If I have the following sprite chart, the design gives me the resolution of 640 to do.

The size of this sprite map is 200px*458px

Let's assume the background of the ribbon we're going to use now. is divided into the following steps:

1, measuring the size of the background map of the ribbon, the size of: 75px*85px

2, the measurement of this ribbon in the sprite map position, that is, set background-position:. After measuring, he is in the sprite map position for X:-123PX,Y:-7PX

3, to the Zhang Xiebi map conversion: Look at the following code:

Know the above size, we will be the line conversion can be divided by 640 and then multiplied by 10 why so calculate, you can look at the source code

To use this sprite chart: 1 2 3 4 5 6 7 8 9 <!--long width is:--> width:75/640*10=1.171875rem;   Height:85/640*10=1.328125rem;   <!--background-size for--> <!--because the width of the whole sprite is 200px,--> Background-size:200/640*10rem Auto; <!--background-position:--> background-position: -123/640*10rem-7/640*10rem;