Html+字体适配不同屏幕大小

1.先设置header里面的meta标签：

meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1"

2.在header写上script标签

document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';

要设置Html的font-size： 设置html标签的font-size，上面概论（使用rem为元素设定字体大小时，相对大小对比的是HTML根元素）写的很清晰，页面元素使用rem单位时，是相对于这个html标签的font-size的大小为基础的。

为什么是clientWidth/640?为什么要乘以100？
2.1）例如：设计稿宽度是640px，有一个元素设计稿上的宽度是50px，设备物理宽度是320px，那么根据比率计算出实际设备里面宽度是：50*（320/640）=25px；首先这里没有问题，实际的上的宽度根据（320/640）这个比率计算出来了是25px，这个（320/640）相当于1rem。

2.2.1）为了计算方便 我们后面把比率乘以了100，（320/640）*100，那么相对应这个元素在设置数值的时候就需要除以100了,这样可以保证最后出来的数值不变，相当于0.5rem=50*（320/640），最终出来的数值一致。 2.2.2）一般浏览器的最小字体是12px，如果font-size=（320/640）px，相当于font-size=0.5px，那么这个数值就小于12px，会造成一些计算的错误，和一些奇怪的问题*100后，font-size是50px。

解释一下：设备宽度/设计稿宽度（以320/640为例）
320/640=0.5*100=50px=1rem;
然后设置html标签的font-size：
font-size：0.32rem=50*0.32=16px;
（这个0.32的比例是自己设置的，因为屏幕最小用的最多的就是320的，这样比较成比例！！！）
就是说在这个html里面的所有1rem=16px了。如果这个字体在设计稿上是50px 而设计稿是640的大小 那在320的屏幕上应该是25px的大小
也就是1.5625rem大小。
公式总结：
1 rem =（ clientWidth/640）*100 *0.32= ？？ px（如上1 rem=16px）
xx px= （yy px）*（ clientWidth/640）{备注：yy：设计稿上大小；xx： 设备上具体大小}
zz rem= xx / 1rem=xx / ？？px {zz 就是你写在css里的具体字的大小}
举例：iphone6 宽372 设计稿还是640的(也有720的设计稿)
1 rem = 372/640*100*0.32= 18.6px

假如：设计稿是50px的
50*（372/640）=29px 实际屏幕上应该是29px
29/18.6=1.5625rem
字体大小写1.5625rem，和在320屏幕大小里写的大小一样的数值。在320宽的屏幕里就是16px大小，在372屏幕里就是29px大小。