Ecmsphp开发中心

1252

帖子

19

跟帖

8

粉丝

用户组:普通会员

头    衔:白银会员

版主

积分
356930
登陆
2134 次
私信
注册时间
2014-06-21 14:06:06
最后登陆时间
2023-09-24 16:04:46

帝国CMS教程:移动端使用js控制rem适配字体的方法

 [只看主题]
楼主
0 |
发表: 4 年前
| |
| |
跳转

帝国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适配字体的教程。

ecmsphp开发中心
ecmsphp开发中心
验证码 换一个

当前在线人数: 0
取消

感谢您的支持,我们会继续努力!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

帝国CMS教程:移动端使用js控制rem适配字体的方法