rem与适配

rem介绍：

rem的出现解决了em的计算问题，rem的参照物就是根元素（html）的font-size，这让我们对于不同的页面设置全局标准的成为可能。

大屏幕，可以设置大的字体单位，小屏幕设置小的字体单位。一举解决了百分比定位和flex布局的遗留问题。


rem优点：做到了“完美适配”



rem缺点：只是等比放大，小屏下字体小，大屏下字体大。


上面是根据高度来确定字体单位，这里可以用宽度来确定字体单位。

var html = document.getElementsByTagName(“html”);

html[0].style.fontSize = document.documentElement.clientWidth/10+“px”;

如何确定字体大小？

第一种

比较优雅：媒体查询，我们可以用媒体查询看看浏览设备的宽高，然后设置一个合适的字体单位


第二种

方法比较精确，那就是用js去算：

body宽度 document.body.clientWidth

body高度 document.body.clientHeight

布局视口宽度 document.documentElement.clientWidth

布局视口高度 document.documentElement.clientHeight


计算方法：


假设：设计稿高度1500px，设计稿中介绍部分高度300px，倒计时字体大小40px，屏幕高度1000px。

第一步：计算单位：html的font-size = 屏幕高度 / 100 –>10px;

第二步：介绍部分设置成高度30rem。

第三步：字体大小设置成4rem。


优点：全局等比放大的适应


这就意味着，你在6plus里面能看的页面，在iphone4里面同样能看，而且不会因为屏幕小而发生元素交叠的情况，也不会因为屏幕大而出现留白的情况。