rem是什么？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
计算原理：
- 屏幕宽为 clientWidth(px)。 设计稿宽度为 750 (px), 假设 n = clientWidth(px)/750(px);单位化简===> n= clientWidth/750 ;
- 将 html的 font-size: n(px);
- 则有 n(px) = 1(rem) ,因为1rem为根节点(html节点)字体的大小一倍;
- 假设有一个 div ,在设计稿测量的宽度为 ruleW(px);
- 则需要写入的宽度 width: 设为 w (单位暂不确定)
- 则有 w/clientWidth(px) = ruleW(px)/750(px) 单位化简===> w/clientWidth(px) = ruleW/750
- 化简 w = (clientWidth/750)ruleW(px) 化简==> w = nruleW(px) 转换 w = ruleW * n(px)
- 最后得出 w = ruleW * 1(rem) = ruleW(rem);
结论: 当我们设置html的font-szie为 (屏幕宽度/设计稿宽度) 的px 时
当我们在设计稿上测得的 px 单位值,直接将值换为 rem单位写到代码里面即可,这点与微信小程序的 rpx 单位适配类似
问题: 上面推导完全按照 数学问题来推算,忽略了一个重要的问题,就是浏览器存在最小字体,不得小于 12px,当我们设置 font-size: n(px) ; 屏幕宽度除以750可能已经很小了,这个比例已经不太合适了,所以我们把它放大一百倍
放大比例计算规则如下:
- n = clientWidth(px)/750(px); n2 = clientWidth(px)/7.50(px); n * 100 = n2; n2为n放大后的比例
- 将 html的 font-size: n2(px); n2为放大后的比例
- 则有 n2(px) = 1(rem) , n (px) * 100 = 1(rem) , n(px) = 1/100 (rem);
- 假设有一个 div ,在设计稿测量的宽度为 ruleW(px);
- 则需要写入的宽度 width: 设为 w (单位暂不确定)
- 则有 w/clientWidth(px) = ruleW(px)/750(px) ,注意这里还是除以 750, 单位化简===> w/clientWidth(px) = ruleW/750
- 化简 w = (clientWidth/750)ruleW(px) 化简==> w = nruleW(px) 转换 w = ruleW * n(px)
- 最后得出 w = ruleW * 1/100(rem) = (ruleW/100)(rem)
结论: 当我们设置html的font-szie为 (屏幕宽度100/设计稿宽度) 的px 时 当我们在设计稿上测得的 px 单位值,直接将值除以100换为 rem单位写到代码里面即可*
下面给出几种适配方案：
所有的使用例子，以一个 div ，在 750 的设计稿中测的 宽度 750 px 、高度 80px 、 背景 pink
1、js适配，在html页面的 head标签内加入如下代码： （推荐）
<script type="text/javascript">
//手机端的适配
document.addEventListener("DOMContentLoaded",function(){
document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
});
window.onresize = function(){
document.getElementsByTagName("html")[0].style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
}
</script>
使用
div{
height: .8rem;
width: 7.5rem;
background: pink;
}
2、css的 calc适配 （推荐）
html{
font-size: calc(100vw / 7.5);
}
使用
div{
height: .8rem;
width: 7.5rem;
background: pink;
}
3、scss 适配
// 计算rem的基准字体
$rem-base-font-size: 100px;
// UI设计图的分辨率宽度
$UI-resolution-width: 750px;
// 需要适配的屏幕宽度
$device-widths: 240px, 320px, 360px, 375px, 390px, 414px, 480px, 540px, 640px, 720px, 768px,1080px, 1024px;
@mixin html-font-size() {
@each $current-width in $device-widths {
@media only screen and (min-width: $current-width) {
html {
$x: $UI-resolution-width / $current-width; //计算出是几倍屏
font-size: $rem-base-font-size / $x;
}
}
}
}
@include html-font-size();
@function pxToRem($px) {
@return $px / $rem-base-font-size * 1rem;
}
使用
div{
height: .8rem;
width: 7.5rem;
background: pink;
}
整体代码
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function(){
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
