响应式布局@media
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
补充:
创建media.js,适用于手机端,文件内容:
(function (win) { resizeRoot(); function resizeRoot() { var wWidth = document.documentElement.clientWidth; if (wWidth > 750) wWidth = 750; else if (wWidth <320) wWidth = 320; document.documentElement.style.fontSize = wWidth / 7.5 + 'px'; } window.onresize = resizeRoot; })(window);
或者,创建rem.js,适用于pc+wap相应,
//网易版 (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, //被iframe引用时,禁止缩放 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 > 1333) { width = 1333 * dpr; } // 乘以100,px : rem = 100 : 1 docEl.style.fontSize = 100 * (width / 1333) + 'px'; }; recalc() if(!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); })(document, window);
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------