如下方法如有不正确的地方,欢迎指正
前提: 设置稿750px
目标:40px = 1rem
js设置方法:(小于等于750屏幕等比缩放)
;(function (doc, win, undefined) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth; if (clientWidth === undefined) return; docEl.style.fontSize = 40 * (clientWidth / 750) + 'px'; }; if (doc.addEventListener === undefined) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false) })(document, window);
css设置方法(750,640,375,320等比缩放):
html{font-size:10px} /*媒体查询*/ @media screen and (min-320px){ html{font-size:17.06px;} } @media screen and (min-375px){ html{font-size:20px;} } @media screen and (min-640px){ html{font-size:34.13px;} } @media screen and (min-750px){ html{font-size:40px;} }
思考:如果根据ui设计图,所有内容都随着屏幕变大而变大,字体会变得超级大,这是不可取的,事实上pc端常用字体是12px,14px,16px,移动端也基本相同,所以段落文字可以不做等比缩放处理,对于标题,还有图片需要做等比缩放。所有单纯用百分比和px布局也是可以的。