|
帝国cms移动端使用js控制rem适配字体的方法介绍，是教大家如何使用js控制移动端rem适配字体的方法的教程。
方法一：设置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
html { font - size: 20 px; } @media only screen and(min - width: 401 px) { html { font - size: 25 px!important; } } @media only screen and(min - width: 428 px) { html { font - size: 26.75 px!important; } } @media only screen and(min - width: 481 px) { html { font - size: 30 px!important; } } @media only screen and(min - width: 569 px) { html { font - size: 35 px!important; } } @media only screen and(min - width: 641 px) { html { font - size: 40 px!important; } }
以上是移动端使用js控制rem适配字体的教程。
|
