本周开始做项目，其中有移动端的，看见其他组有使用rem的，
然后我就开始百度rem，搜到几篇好文章，跟大家分享一下，
web app变革之rem
web app 自适应方案总结 关键字 弹性布局之rem
以下代码，是在朋友所发案例中拷贝的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<script>
//auto adaptation
var calculate_size = function () {
var BASE_FONT_SIZE = 100;
var docEl = document.documentElement,
clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 320) + ‘px‘;
};
// Abort if browser does not support addEventListener
if (document.addEventListener) {
var resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘;
window.addEventListener(resizeEvt, calculate_size, false);
document.addEventListener(‘DOMContentLoaded‘, calculate_size, false);
calculate_size();
}
</script>
关于var BASE_FONT_SIZE = 100;
如下解释：
根元素的值可以任意的去定义，
但是建议最小定义20px以上，
还有定义的时候要考虑方便自己换算，
有些人定100px，
但是不要定义10px，
因为chrome不支持中文字体小于12px，
所以会导致当计算小于12px的时候，
会默认取12px去计算，导致中文版chrome的rem计算不准确。
时间： 2024-10-06 09:58:41