第一步：由於一些解析度不同等的一些原因，要做到能夠適配，開始要加這個一句話

詳情的參考：https://blog.csdn.net/u012402190/article/details/70172371

<meta name="viewport" content="width=device-width, initial-scale=1">

第二步:在css中寫這麼一些clss類，實現根據螢幕的大小設定字型大小，為什麼設定字型，由於rem這個計算單位需要參考html的font-size值來進行計算，由於計算得到的結果不同，大小也自然不同！

html { font-size:100px; }
@media(max-width:540px){ html { font-size:84.375px; } } /*Android常用寬度*/
@media(max-width:480px){ html { font-size:75px; } }		/*Android常用寬度*/
@media(max-width:414px){ html { font-size:64.69px; } }  /*i6Plus,i7Plus寬度*/  
@media(max-width:375px){ html { font-size:58.59px; } }	/*i6,i7寬度*/
@media(max-width:360px){ html { font-size:56.25px; } }	/*Android常用寬度*/
@media(max-width:320px){ html { font-size:50px; } }	
 

第三部：

計算公式=實際的px畫素/當前的螢幕font-size值

得到的數字就是rem值，再賦值給原來的元素。

這樣就實現了 適配的效果！