什么是rem?
** rem(font size of the root element)是指相对于根元素的字体大小的单位。**
** em(font size of the element)是指相对于父元素的字体大小的单位。**
- em在浏览器中默认为16px,不会随浏览器尺寸变化。
- 而rem可以理解为会随屏幕尺寸变化而发生改变的单位(可以理解为屏幕宽度百分比,或者vw)。
在开发的时候,往往会因为尺寸改变导致页面元素位置,大小发生偏移,造成页面变形,而使用rem这类响应式的尺寸单位,则可根据页面的变化,自动按比例伸缩,常用作为移动端适配方案。
flexible.js
flexible.js是阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。淘宝的移动端适配方案就是通过他实现的。
原理
flexible.js通过将页面划分为10份,每一份为1rem来解决的,比如原始设计图为750px宽,那么1rem=75px,在边写页面样式时,将相应的尺寸改变为rem单位即可实现适配。
我们也根据之间的需求配置如何分割页面
setRemUnit()方法中修改
用法
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: pink;
height: 1rem;
width: 1rem;
}
</style>
</head>
<body>
<div></div>
<script src="flexible.js"></script>
</body>
</html>
flexible.js
(function flexible(window, document) {
var docEl = document.documentElement;
var dpr = window.devicePixelRatio || 1;
// adjust body font size
// 设置 em 默认字体所对应的大小
function setBodyFontSize() {
if (document.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();
// 当页面发生改变时,重新设置 rem 所对应的刻度值
// 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);
自动计算插件
vscode —— cssrem插件
可以根据每份rem所代表的像素值,自动帮我们计算
默认为1rem = 16px,这里根据设计图尺寸与视图分割比设置自己需要的数值
自动计算转换,是不是更方便了呢,大爱vs。