原博客3分钟读懂移动端rem使用方法
使用rem
rem适合于移动端适配和制作全屏效果,例如设计图的宽度与屏幕宽度进行适配。页面以及页面内容随屏幕宽度变化而变化。
使用场景
1.假设设计图为640px
2.设定为64rem=100%则1rem = 10px(比例自定义,也可以设置为1rem = 20px)
3.编写静态页面,然后将css中的px值都按照自己设定的rem与px的比例转化为rem。
注意
1rem的大小是通过html下的font-size这个css属性告诉浏览器的
所以在设置rem比例是在html上设置。
html{
font-size:10px;如果1rem=10px
}
.div{
width:50rem;/*width:500px;*/
height:50rem;/*height:500px;*/
}
计算公式
1、你有一个设计稿A(假定640px),有一个预设的rem和px的比例B(假如是1rem = 10px)
2、获取用户浏览器的可视区域的宽度C(假如是320px),那么他此时1rem的尺寸D 可以根据 B/A = D/C 这个公式得知
3、原因是你假定屏幕可以容纳多少个rem,这是一个固定比例(如这里就是64rem)
B/A = D/C 这个公式就是保证在设计图上自己预设的一行的rem数量和实际屏幕宽度上一行的rem数量相同。
类似于给自己的网页打上网格,想放大或缩小网页来使得平铺时,就放大缩小网页里的每一个小块
当屏幕大小变化时,就需要取得当前屏幕大小来根据公式计算出此刻font-size大小
var fun = function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//这里是假设在600px宽度设计稿的情况下,1rem = 10px;
//可以根据实际需要修改
docEl.style.fontSize = 10 * (clientWidth / 600) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}
fun(document, window);