第一步:由于一些分辨率不同等的一些原因,要做到能够适配,开始要加这个一句话
详情的参考: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值,再赋值给原来的元素。
这样就实现了 适配的效果!