方法一:设置fontsize 按照iphone 5的适配 1em=10px 适配320
// “()()”表示自执行函数 (function (doc, win) { var docEl = doc.documentElement, // 手机旋转事件,大部分手机浏览器都支持 onorientationchange 如果不支持,可以使用原始的 resize resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { //clientWidth: 获取对象可见内容的宽度,不包括滚动条,不包括边框 var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 10*(clientWidth / 320) + 'px'; }; recalc(); //判断是否支持监听事件 ,不支持则停止 if (!doc.addEventListener) return; //注册翻转事件 win.addEventListener(resizeEvt, recalc, false); })(document, window);
方法二:按照iPhone6的尺寸设计 是375/25=15px
(function (docs, win) { var docEls = docs.documentElement, resizeEvts = 'orientationchange' in window ? 'orientationchange' : 'resize', recalcs = function () { //getBoundingClientRect()这个方法返回一个矩形对象 window.rem = docEls.getBoundingClientRect().width/25; docEls.style.fontSize = window.rem + 'px'; }; recalcs(); if (!docs.addEventListener) return; win.addEventListener(resizeEvts, recalcs, false); })(document, window);
方式三:采用media
1 html { 2 font - size: 20 px; 3 } 4 @media only screen and(min - 401 px) { 5 html { 6 font - size: 25 px!important; 7 } 8 } 9 @media only screen and(min - 428 px) { 10 html { 11 font - size: 26.75 px!important; 12 } 13 } 14 @media only screen and(min - 481 px) { 15 html { 16 font - size: 30 px!important; 17 } 18 } 19 @media only screen and(min - 569 px) { 20 html { 21 font - size: 35 px!important; 22 } 23 } 24 @media only screen and(min - 641 px) { 25 html { 26 font - size: 40 px!important; 27 } 28 } 复制代码
推荐使用的 js方式设置