巩义市站街摄影材料厂(普通合伙)

今天小编跟大家讲解下有关移动端rem适配 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关移动端rem适配 的相关资料，希望小伙伴们看了有所帮助。

1：css3的media query来实现适配，例如下面这样：

html { font-size : 20px;[email protected] only screen and (min-width: 401px){ html { font-size: 25px !important; [email protected] only screen and (min-width: 428px){ html { font-size: 26.75px !important; [email protected] only screen and (min-width: 481px){ html { font-size: 30px !important; [email protected] only screen and (min-width: 569px){ html { font-size: 35px !important; [email protected] only screen and (min-width: 641px){ html { font-size: 40px !important; }}

2.通过js动态设置html字体，例如下面这样

var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; //默认设计图为640的情况下1rem=100px；根据自己需求修改 if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);

来源：爱蒂网