Mobile terminal adaptation scheme summarizes

/**

* Sass basic use reset.scss

* base.scss

* DOMContentLoaded: When Dom loaded

* Orientationchange: horizontal rotation when moving and when the trigger

* Resize: when you resize the window when the trigger

* Note http://feg.netease.com/archives/570.html specific documents

*/

// js加载
var docEl = doc.documentElement;
var resizeEvt = "orientationchange" in window ? "orientationchange" : "resize";
var recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth >= 360 && clientWidth < 375) {
clientWidth = 375
}
if (!clientWidth) { return }
docEl.style.fontSize = 312.5 * (clientWidth / 375) + "%"
};
if (!doc.addEventListener) { return }
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);

 

 

To prevent problems // js-loaded and in line with media queries 
// Set the root node js compatible font-size models use part of the problem not take effect

@media screen and (min-width: 320px) { html{ font-size: 266.667%; } }

@media screen and (min-width: 360px) { html{ font-size: 312.5%; } }

@media screen and (min-width: 375px) { html{ font-size: 312.5%; } }

@media screen and (min-width: 400px) { html{ font-size: 333.333%; } }

@media screen and (min-width: 440px) { html{ font-size: 366.667%; } }

@media screen and (min-width: 480px) { html{ font-size: 400%; } }

@media screen and (min-width: 520px) { html{ font-size: 433.333%; } }

@media screen and (min-width: 560px) { html{ font-size: 466.667%; } }

@media screen and (min-width: 600px) { html{ font-size: 500%; } }

@media screen and (min-width: 640px) { html{ font-size: 533.333%; } }

@media screen and (min-width: 680px) { html{ font-size: 566.667%; } }

@media screen and (min-width: 720px) { html{ font-size: 600%; } }

@media screen and (min-width: 760px) { html{ font-size: 633.333%; } }

@media screen and (min-width: 800px) { html{ font-size: 666.667%; } }

 

 

// SASS project written summary

 

// basic use SASS:

// http://www.ruanyifeng.com/blog/2012/06/sass.html next project practice

(1) as a reference to iphone6, iphone6 ​​width is 375px, dpr is 2, for the FIG 375px shown above, we need 750px image size, we get the width of the design must be psd 750px. In order to facilitate writing rem, we hope that the design psd 750px corresponding rem is 7.5rem. The above design 750px actual size in FIG iphone6 ​​above is 375px, so we need to set the iphone6 ​​font-size = 375 / 7.5px = 50px. More generally, since the default value of the mobile terminal is 16px font-size, so we prefer to use a set percentage of the font-size: font-size = 50/16 = 312.5%. (Note: The percentage px and do not fundamentally different.)

 

deviceWidth = 320，font-size = 320 / 7.5= 42.667px deviceWidth = 375，font-size = 375 / 7.5 = 50px deviceWidth = 414，font-size = 414 / 7.5 = 55.2px deviceWidth = 500，font-size = 500 / 7.5= 66.667px

Generating a corresponding percentage,

Percentage fontSize / 16 = corresponding

 Transfer: https://www.cnblogs.com/yayaxuping/p/10003095.html