当前位置: article > 正文

HTML5中如何实现rpx布局_html rpx

作者：不正经 | 2024-02-19 03:44:26

踩

html rpx

HTML5中如何实现rpx布局

引导

我们在实际工作中会遇到很多情况会用到rpx布局，rpx布局的原理是将屏幕横向划分750份，每份即是1rpx。从原理上，rpx有很好的多端适配能力，而且比em、rem、vw、vh有更直观的表达能力，而且与百分比布局不同，它可以无视父容器的宽高，团队的新手都能看懂，设计稿转页面的时候也大多是用rpx来做布局的。有些情况下，我们必须要依赖Freemarker、Velocity等模板引擎进行服务器端渲染，或者我们只想做一个简简单单的HTML页，不希望动辄npm编译数分钟，那怎么才能实现rpx布局呢？不多说，直接上代码。

核心代码

创建一个js文件，命名为rpx4html.js，这个js文件就是用来将px翻译为rpx的工具。比如我们要有一个占满全宽的div，直接设置width:750px即可，使用该js，即可自动把750px当做750rpx来运算。

/**
 * 传统HTML支持RPX工具
 *
 * 使用方法：
 * 1、引入
 * 2、在body之前执行
 *
 * 注意事项：
 * 1、简写的不认（比如border:#f3f3f3 1px solid是不识别的）
 * 2、写的时候要用px，不要用rpx
 * 3、不支持不同源的link
 * 4、只能执行一次，否则会算错
 * 5、不要试图往resize事件里放
 *
 * @author 杨若瑜
 */
 (function () {
  var isReady = false;
  var readyList = [];
  var timer;
  whenDocumentReady = function (fn) {
    if (isReady) fn.call(document);
    else
      readyList.push(function () {
        return fn.call(this);
      });
    return this;
  };
  var onDOMReady = function () {
    for (var i = 0; i < readyList.length; i++) {
      readyList[i].apply(document);
    }
    readyList = null;
  };
  var bindReady = function (evt) {
    if (isReady) return;
    isReady = true;
    onDOMReady.call(window);
    if (document.removeEventListener) {
      document.removeEventListener('DOMContentLoaded', bindReady, false);
    } else if (document.attachEvent) {
      document.detachEvent('onreadystatechange', bindReady);
      if (window == window.top) {
        clearInterval(timer);
        timer = null;
      }
    }
  };

  if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', bindReady, false);
  } else if (document.attachEvent) {
    document.attachEvent('onreadystatechange', function () {
      if (/loaded|complete/.test(document.readyState)) bindReady();
    });

    if (window == window.top) {
      timer = setInterval(function () {
        try {
          isReady || document.documentElement.doScroll('left');
        } catch (e) {
          return;
        }
        bindReady();
      }, 5);
    }
  }
})();

let rpx4html = () => {
  let globalWidth = document.documentElement.clientWidth;
  let perRpx = globalWidth / 750;
  for (let ssi in document.styleSheets) {
    let sheet = document.styleSheets[ssi];
    if (sheet.cssRules) {
      for (let cri in sheet.cssRules) {
        let rule = sheet.cssRules[cri];
        for (let si in rule.style) {
          let name = rule.style[si];
          let value = rule.style[name];
          if (value && value.indexOf('px') > -1 && value.search('^[0-9]+px$') > -1) {
            let num = new Number(value.match('[0-9]+')[0]);
            rule.style[name] = num * perRpx + 'px';
          }
        }
      }
    }
  }
};

whenDocumentReady(rpx4html);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

如何使用

比较稳妥的使用方式是在所有link引入css和style之后引入这个js

<script src="rpx4html.js"></script>
1

例如：
我们写个HTML：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>rpx4html-demo</title>
    <link rel="stylesheet" href="demo.css">
    <script src="rpx4html.js"></script>
  </head>
  <body>
    <div class="test">标题栏</div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

引入demo.css

html,
body {
  padding: 0;
  margin: 0;
}
.test {
  width: 750px;
  height: 100px;
  font-size: 32px;
  font-weight: bold;
  background-color: #2e66af;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'PingFangSC-Regular','微软雅黑','Arial';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

结果测试

在这里插入图片描述
如图，在加载页面之后，各个px都会按照rpx来重新计算尺寸。很好的实现了rpx布局规则在传统html上的落地应用。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/112424