A collection of mobile-adaptive methods

Transferred from: http://azq.space/blog/bigcan-lesson-1/

1. Simple Rough Type

Zoom Mode:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" > <!--must be placed in the Head tab--   <script>    var _scale_ = 1;    _scale_ = function () {    var devicewidth = document.documentElement.clientWidth, scale    = devicewidth/640;    Scale = scale > 1? 1:scale;    Document.body.style.zoom = scale;    Return scale;//save to JS with} ();//Under the body can be </script>

　　

The above is through the CSS Properties Zoom page, the design width of 640 (the following design draft size is 640), so the advantage is directly in accordance with the original design of the size with PX to write CSS, but this is obviously not large enough, the page will sometimes not clear, but through and% Can also quickly build your H5 page.

Scale mode of CSS3 :

This way bug many, not suitable for novice, also not suitable for the old driver, so slightly

2. Gentle and Compact type

Meta-viewport-scale Way:

Resets properties such as Initial-scale by proportions, with fewer browsers not recognizing resets

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" > <!--must be placed in the head label--   <script>var _scale_ = 1;    _scale_ = function () {    var devicewidth = document.documentElement.clientWidth, scale    = devicewidth/640;    Scale = scale > 1? 1:scale;    var Metael = document.queryselector (' meta[name= "viewport"] ");    Metael.setattribute (' content ', ' width=640,initial-scale= ' + scale + ', maximum-scale= ' + scale + ', minimum-scale= ' + scale + ', User-scalable=no ');    return scale;} ();</script>

　　

This way and zoom in a similar manner is also the use of scaling, CSS is also in accordance with the original design draft to write, but also to solve the problem of 1px, temporarily did not find any problems, there may be unclear phenomenon, if there are students in the use of this method when encountered problems please tell me, hurriedly pits

3. High-end fashion

This is a high-definition adaptation method, in addition to resetting the meta-defunct browser

Dpr,rem,meta

var DPR, REM, scale;        var docel = document.documentelement;        var Fontel = document.createelement (' style ');        var Metael = document.queryselector (' meta[name= "viewport"] "); DPR = Window.devicepixelratio | |        1;        rem = Docel.clientwidth * DPR/10;        scale = 1/DPR; Set viewport, zoom to achieve HD effect metael.setattribute (' content ', ' width= ' + DPR * docel.clientwidth + ', initial-scale= ' + S        Cale + ', maximum-scale= ' + scale + ', minimum-scale= ' + scale + ', User-scalable=no ');        Set the Data-dpr property, reserved for the use of CSS hack docel.setattribute (' DATA-DPR ', DPR);        Dynamic Write style docEl.firstElementChild.appendChild (Fontel);        fontel.innerhtml = ' html{font-size: ' + rem + ' px!important;} ';            For JS, the conversion function between REM and PX under a DPR window.rem2px = function (v) {v = parsefloat (v);        Return v * REM;        };            Window.px2rem = function (v) {v = parsefloat (v);        return v/rem;        }; WINDOW.DPR = DPR Window.rem = REM;

Then for the sake of convenience we can use less or sass, scss to manage our CSS style, here is a simple introduction to less

. Px2rem (@name, @px) {@{name}: @px/64 * 1REM;}.  PX2PX (@name, @px) {@{name}: Round (@px/2) * 1PX;  [data-dpr= "2"] & {@{name}: @px * 1px;  }//For MX3 [data-dpr= "2.5"] & {@{name}: Round (@px * 2.5/2) * 1PX;  }//For Xiaomi Note [data-dpr= "2.75"] & {@{name}: Round (@px * 2.75/2) * 1PX; } [data-dpr= "3"] & {@{name}: Round (@px/2 * 3) * 1px}//For Samsung NOTE4 [data-dpr= "4"] & {@{name}:  @px * 2PX;  }}/* Simple fillet radius */.border-radius (@radius: 5px) {-webkit-border-radius: @radius;  -moz-border-radius: @radius; Border-radius: @radius;} /* radius of Four Corners custom */.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {-webkit-border-r  Adius: @topleft @topright @bottomright @bottomleft;  -moz-border-radius: @topleft @topright @bottomright @bottomleft; Border-radius: @topleft @topright @bottomright @bottomleft;} /* Block Shadow Box Shadow*/.box-shadow (@x:0px, @y:3px, @blur: 5px, @alpha: 0.5) {-webkit-box-shadow: @x @y @bluR Rgba (0, 0, 0, @alpha);  -moz-box-shadow: @x @y @blur rgba (0, 0, 0, @alpha); Box-shadow: @x @y @blur rgba (0, 0, 0, @alpha);}  /* Element Transition effect Transition*/.transition (@prop: all, @time: 1s, @ease: linear) {-webkit-transition: @prop @time @ease;  -moz-transition: @prop @time @ease;  -ms-transition: @prop @time @ease; Transition: @prop @time @ease;} /* Convert/Rotate Transform*/.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {-webkit-transform:rotate (@rot  ATE) scale (@scale) skew (@skew) translate (@translate);  -moz-transform:rotate (@rotate) scale (@scale) skew (@skew) translate (@translate);  -ms-transform:rotate (@rotate) scale (@scale) skew (@skew) translate (@translate); Transform:rotate (@rotate) scale (@scale) skew (@skew) translate (@translate);}  /* Linear gradient */.gradient (@origin: Left, @start: #ffffff, @stop: #000000) {background-color: @start;  Background-image:-webkit-linear-gradient (@origin, @start, @stop);  Background-image:-moz-linear-gradient (@origin, @start, @stop); BackgrounD-image:-ms-linear-gradient (@origin, @start, @stop); Background-image:linear-gradient (@origin, @start, @stop);} /* Fast gradient */.quick-gradient (@origin: Left, @alpha: 0.2) {background-image:-webkit-linear-gradient (@origin, Rgba (  0,0,0,0.0), Rgba (0,0,0, @alpha));  Background-image:-moz-linear-gradient (@origin, Rgba (0,0,0,0.0), Rgba (0,0,0, @alpha));  Background-image:-ms-linear-gradient (@origin, Rgba (0,0,0,0.0), Rgba (0,0,0, @alpha)); Background-image:linear-gradient (@origin, Rgba (0,0,0,0.0), Rgba (0,0,0, @alpha));} /* Mirror effect */.reflect (@length: 50%, @opacity: 0.2) {-webkit-box-reflect:below 0px-webkit-gradient (linear, left top, left B Ottom, from (Transparent), color-stop (@length, Transparent), to (Rgba (255,255,255, @opacity)));}

　　

Here are some CSS3 effects.

Less is not recognized by the browser so we want to compile it, one is to use the online JS compiler, this need to load a JS, it is recommended to use the program to compile less, such as using less in the NPM package to compile, or build tools gulp or package management tools webpack to compile, There is time to share the source of several of my projects, or in the CSS directly write px and then use the NPM package px2rem to directly compile into REM, and then reference the compiled can be, in fact, the above less prefix can be omitted, and then use the NPM package autoprefixer from the dynamic generation to

Model 4.CSS

%
This is not much to say, is the need to calculate and design the width of the ratio and height ratio, note that: Padding,margin percent calculation is based on the width, it is important to note
Vw&vh
This is to forget the CSS3 is new or has been before, this is similar to the percentage, but his parent is the screen, that is, VW corresponds to the screen width, vh corresponds to the height, the entire screen size is 100VW*100VH

5. Free-to-play

Here's a way I use the most:
Rem,vw&vh,%,flex

var DPR, REM, scale;   var docel = document.documentelement;   var Fontel = document.createelement (' style ');   scale = docel.clientwidth/640;   Scale = scale>1?1:scale;   REM =;   rem = Rem*scale;   Dynamic Write style   docEl.firstElementChild.appendChild (Fontel);   fontel.innerhtml = ' html,body{font-size: ' + rem + ' px!important;} ';

　　

Dynamically set the font size of the root

How REM is handled in CSS is the same as the third solution

This method of compatibility is good, the mobile is basically OK, sometimes the design of the design draft may, slightly longer, this time we will use on the layout of the% and Vh,flex, the picture to set the height of the width of the automatic, this method is really to improvise, but this method is also the most friendly to the viewer, To the maximum extent not due to the visibility of the small area of the impact of viewing

A collection of mobile-adaptive methods