使用less自动进行移动端rem适配计算

2018-08-17 分类：HTML/CSS 作者：管理员阅读（11172）

在做移动端的时候，最主要的问题就是要做适配，通过我们都是通过rem，但是，rem和px需要我们去转换，在一个项目中前端尺寸每次都需要计算的时候，那就应该交给插件工具们，当然，如果你的项目是工程化的例如vue-cli，那可以选择postcss-pxtorem更为合适。

某宝rem适配文件flexible.js

看起来还不错，1rem=37.5px（苹果6下）

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

// JavaScript Document
(function flexible (window, document) {
var docEl = document.documentElement; //获取文档根节点并保存到变量docEl中(相当于获取到html对象)
var dpr = window.devicePixelRatio || 1; //获取像素比，如果window.devicePixelRatio为false是dpr为1，如果window.devicePixelRatio大于1，那么dpr赋值取大的数

function setBodyFontSize () {
if (document.body) { //获取到body对象是否存在，个人觉得啰嗦
document.body.style.fontSize = (12 * dpr) + 'px';
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize);
}
}
setBodyFontSize();

// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}

setRemUnit()

// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})

// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))