移动端自适应方案,这里推荐使用网易做法
用上这段代码 就可以根据750设计稿 测量尺寸来精准实现了
网易做法
引入:页面开头处引入下面这段代码,用于动态计算font-size
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 (function (doc, win ) { var docEl = doc.documentElement , isIOS = navigator.userAgent .match (/\(i[^;]+;( U;)? CPU.+Mac OS X/ ), dpr = isIOS ? Math .min (win.devicePixelRatio , 3 ) : 1 , dpr = window .top === window .self ? dpr : 1 , dpr = 1 , scale = 1 / dpr, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' ; docEl.dataset .dpr = dpr; var metaEl = doc.createElement ('meta' ); metaEl.name = 'viewport' ; metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale; docEl.firstElementChild .appendChild (metaEl); var recalc = function ( ) { var width = docEl.clientWidth ; if (width / dpr > 750 ) { width = 750 * dpr; } docEl.style .fontSize = 100 * (width / 750 ) + 'px' ; }; recalc () if (!doc.addEventListener ) return ; win.addEventListener (resizeEvt, recalc, false ); })(document , window );
使用:
未引入前:
1 2 3 4 body { width : 750px ; height : 640px ; }
引入后:除以100并将px换成rem
1 2 3 4 body { width : 7.5rem ; height : 6.4rem ; }
换算的依据:
1 2 3 4 5 6 7 8 9 var recalc = function ( ) { var width = docEl.clientWidth ; if (width / dpr > 750 ) { width = 750 * dpr; } docEl.style .fontSize = 100 * (width / 750 ) + 'px' ; };
淘宝做法
引入:页面开头处引入下面这段代码,用于动态计算font-size,或者单独放入一个文件,引入文件也可以
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 ; (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) { 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) { if (devicePixelRatio >= 3 && (!dpr || dpr >= 3 )) { dpr = 3 ; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2 )) { dpr = 2 ; } else { dpr = 1 ; } } else { dpr = 1 ; } scale = 1 / dpr; } docEl.setAttribute ('data-dpr' , dpr); if (!metaEl) { metaEl = doc.createElement ('meta' ); metaEl.setAttribute ('name' , 'viewport' ); metaEl.setAttribute ('content' , 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no' ); if (docEl.firstElementChild ) { docEl.firstElementChild .appendChild (metaEl); } else { var wrap = doc.createElement ('div' ); wrap.appendChild (metaEl); doc.write (wrap.innerHTML ); } } function refreshRem ( ) { var width = docEl.getBoundingClientRect ().width ; if (width / dpr > 540 ) { width = 540 * dpr; } var rem = width / 10 ; docEl.style .fontSize = rem + 'px' ; flexible.rem = win.rem = rem; } win.addEventListener ('resize' , function ( ) { clearTimeout (tid); tid = setTimeout (refreshRem, 300 ); }, false ); win.addEventListener ('pageshow' , function (e ) { if (e.persisted ) { clearTimeout (tid); tid = setTimeout (refreshRem, 300 ); } }, false ); if (doc.readyState === 'complete' ) { doc.body .style .fontSize = 12 * dpr + 'px' ; } else { doc.addEventListener ('DOMContentLoaded' , function (e ) { doc.body .style .fontSize = 12 * 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' ] = {}));
使用:
未引入前:
1 2 3 4 body { width : 750px ; height : 640px ; }
引入后:除以100并将px换成rem
1 2 3 4 5 @font-size-base : 75 ;body { width : 750rem /@font-size-base; height : 640rem /@font-size-base; }
换算的依据:
1 2 3 4 5 6 7 8 9 10 function refreshRem ( ) { var width = docEl.getBoundingClientRect ().width ; if (width / dpr > 540 ) { width = 540 * dpr; } var rem = width / 10 ; docEl.style .fontSize = rem + 'px' ; flexible.rem = win.rem = rem; }
作者:流云诸葛
出处:http://www.cnblogs.com/lyzg/