移动端rem距离单位的使用

发布时间:2021-01-10 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了移动端rem距离单位的使用编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在做移动端开发的时候大家肯定会遇到适配问题,手机的屏幕大小有非常多的类别,使用传统的px距离单位已经无法满足我们的需要,于是rem便横空出世,他与百分比定位是比较像的,但是也是有一定的区别,在这里就跟大家分享一下rem的使用方法。

rem是一个相对单位,他的大小是可以根据你的计算来定的,比如说在我的移动端网页中rem与px的换算规则如下:

1rem = 100px

在UI给我的设计稿中是以750px的宽度为标准设计的,于是在我的移动端网页中就以750px为标准规定rem的换算规则,请看以下代码:

(function(doc,win) {
  var docEl = doc.documentElement,resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",recalc = function() {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    if (clientWidth > 750) {
      docEl.style.fontSize = "100px"; // 修正一下大于750的字体大小为100px
    } else {
      docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
    }
    /*
     * 100 -> html,body {  font-size:100px; }
     * 750 -> 此处以 iPhone6 两倍设计稿 宽度750px 布局页面
     * 根据具体情况改变这两个数值
     */
  };

if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt,recalc,false);
    doc.addEventListener("DOMContentLoaded",false);
})(document,window);

大致原理就是监听window的resize,当浏览器窗口大小变化时就会触发我设置的函数,重新定义rem的换算规则,这样就可以对不同屏幕大小的距离单位进行适配。

总结

以上是编程之家为你收集整理的移动端rem距离单位的使用全部内容,希望文章能够帮你解决移动端rem距离单位的使用所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478