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大小。