移动端自适应解决方案

http://dudodo.cc/2017/06/01/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/#more

 

 

设计稿640

640px = 6.4rem

100px = 1rem

10px = 0.1rem

1px = 0.01rem

 

( function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

designSize = 640

 

var recalc = function () {

var clientWidth = docEl.clientWidth,

clientHeight = docEl.clientHeight;

if (!clientWidth) return;

if (clientWidth >= designSize) {

docEl.style.fontSize = (designSize / 10) + (clientWidth / clientHeight * 10) + 'px'

} else {

docEl.style.fontSize = 100 * (clientWidth / designSize) + 'px';

}

}

 

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener( 'DOMContentLoaded', recalc, false);

})( document, window)

 

 

 

@ media only screen and (min-width:481px) {

html {

font-size: 94%!important /* 15.04÷16=94% */

}

}

 

@ media only screen and (min-width:561px) {

html {

font-size: 109%!important /* 17.44÷16=109% */

}

}

 

@ media only screen and (min-width:641px) {

html {

font-size: 125%!important /* 20÷16=125% */

}

 

body {

max-width: 640px

}

}

 

body {

font-size:12px;

font-size:1.2rem ; /* 12÷10=1.2 */

font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;

background-color: #ddd;

min-width: 320px;

margin: 0 auto;

position: relative

}