1rem的大小是根据最底层的font-size的值来变化的,
设置一个监听,监听页面的的宽度,通过页面的宽度来设置 底层font-size的值。
所以不同的屏幕宽度,1rem的值是不一样大小的。
正常,我们会将一个屏幕的宽设置成16rem.不管屏幕的宽是多少,他都等于16rem。
这就相当于百分比布局,百分比布局是将宽设置成100份,rem是将宽设置成16份(这里设置成多少份,自己定义)
既然rem类似于百分比布局,那为什么不直接用百分比布局,而采用rem布局呢?这里就牵扯到高度。
百分比布局中,高度的百分比,是他父级高度的百分比,所以,很多时候不能用。
比如你设置个正方形,宽度设:20%;高度设:20%;那么只有在你的父级元素是正方形的时候,它才是正方形,因为手机屏幕
基本没有正方形的,所以,一般不会在移动端过多的采用百分比布局(以前,百分比布局是移动端常用的)
同样是设置一个正方形,高度设置成:2rem;宽度:2rem;这样得到的就是个正方形。因为rem布局中,1rem的大小只跟页面的宽
有关系,跟高没关系。(当然,你也可以设置成只跟高有关系,比如横屏布局什么的)
以前我们写移动端的时候,主要是以iphone6来做参考。6的宽是375px,所以1rem就等于23.4375px
获取屏幕宽度,设置底层font-size的值。
(function (doc, win) {
//orientationchange : 判断手机是水平方向还是垂直方向,感应方向
//doc ==》 document对象
//doc.documentElement ==> 得到文档的根元素--> <html>
//之所以要得到文档的根元素,是为了计算网页所打开时屏幕的真实宽度
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//320 是我们默认的手机屏幕
//clientWidth 是我们页面打开时所得到的屏幕宽度真实的宽度值
//这两者相除得到一个放大或缩小的比例值
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
//设置根元素font-size
};
/*600px
20 * 600/320 -- > [2 -- 3] 放大范围
200/320 -- > [0.5 -- 0.1] 缩小*/
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
//当dom加载完成时,或者 屏幕垂直、水平方向有改变进行html的根元素计算
})(document, window);
//如果你不想进行一个响应式设计的开发,你可以直接把font-size写死
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
这个式子简化出来就是
docEl.style.fontSize = clientWidth / 16 + 'px';