1 /** 2 * 移动端自适应 3 */ 4 <meta name="viewport" 5 content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> 6 // <!--content--> 7 // <!--width=device-width 可视区域的宽度,值可为数字或关键词device-width--> 8 // <!--height=device-height 可视区域的高度,值可为数字或关键词device-height--> 9 // <!--user-scalable=yes/no 是否可对页面进行缩放,no 禁止缩放--> 10 // <!--initial-scale=1.0 页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放--> 11 // <!--minimum-scale=1.0 可视区域的缩小级别--> 12 // <!--maximum-scale=1.0 可视区域的放大级别-->
1 /** 2 * rem适配 iPhone5下html字号为100px,320px下1rem=100px 3 */ 4 (function (doc, win) { 5 var docEl = doc.documentElement, 6 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 7 recalc = function () { 8 var clientWidth = docEl.clientWidth; 9 if (!clientWidth) return; 10 docEl.style.fontSize = 100 * (clientWidth / 320) + 'px'; 11 }; 12 13 // Abort if browser does not support addEventListener 14 if (!doc.addEventListener) return; 15 win.addEventListener(resizeEvt, recalc, false); 16 doc.addEventListener('DOMContentLoaded', recalc, false); 17 })(document, window);
留下你的足迹求推荐呦