移动端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", recalc, false);

})(document, window);

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

巴特西

移动端rem距离单位的使用

最新文章

热门文章