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);elsereadyList.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);

如何使用

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

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

例如：
我们写个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>

引入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';
}