如何利用rem做响应式布局

第一步：由于一些分辨率不同等的一些原因，要做到能够适配，开始要加这个一句话

详情的参考：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值，再赋值给原来的元素。

这样就实现了 适配的效果！