rem适配

什么是em和rem？

1em=1倍的自身fontsize；
1rem=1倍的html（根标签）的fontsize；

适配的作用

适配是为了实现在不同页面上实现等比；

如何设置一个div的width在不同设备上实现满屏？

我们设置html的fontsize为布局视口的宽度

html.style.fontSize = document.documentElement.clientWidth + 'px';

再设置div的width为1rem；

div{width:1rem;}

rem适配代码演示

//前面的分号是一个编码习惯：防止相邻的函数忘了分号，被浏览器解析成函数调用报错；
//用IFFE是函数自调用封装，防止恶意代码修改rem适配的内容，
//也防止rem适配代码的变量跟项目中其他变量的冲突；
;(function(){
	//自己创建一个style标签，在项目中页面中可能没有style标签；
	var styleNode = document.createElement('style');
	//	创建一个变量w用来接收布局视口的宽度，除以16是因为浏览器不支持小数，
	//	所以尽量让项目中元素的数值大于1；
	var w = document.documentElement.clientWidth/16;
	//把html的fontsize通过css的方法进行设置；
	//!important是css中的属性，直接通过控制元素的style是不起作用的。
	 styleNode.innerHTML =  `html{font-size:${w}px!important}`;
	//把自己创建的style标签插入到页面head标签中。
	document.head.appendChild(styleNode);
})()

rem适配原理和优缺点

rem适配原理

• 改变了一个元素在不同设备上占据的css像素的个数；
  rem适配的优缺点
• 没有破坏完美视口
• px值到rem的转换太复杂