移动端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的换算规则,这样就可以对不同屏幕大小的距离单位进行适配。

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型 ...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...