总结二

px

px指的是逻辑像素，也叫作css像素，适配时不能使用px作为单位

em

指的是一个汉字的宽度，2em表示的是两个汉字的宽度 em是相对于父元素的font-size来说的，因为这个特性他也不能够作为适配

rem

r表示的是root，指的是HTML标签
1 rem==>html标签中的font-size的大小
1 em ==>父标签中的font-size的大小
例：html标签的font-size设置为64 px
1 rem =64 px
2 rem =128 px

适配

1.在大屏上显示大盒子，在小屏上显示小盒子
2.如果是大屏，盒子或者字体大小设置的大一点，小屏设置的小一点

需要利用媒体查询+rem来适配的步骤

1）得到设计稿 一般情况下，设计稿的尺寸是750px。
2）通常我们把浏览器的模拟器也调整成750px
3）严格按照设计稿，以rem为单位，把设计稿还原出来。
4）开始写样式，需要确定html标签的font-size，通常我会把fontsize
定成100px，叫rem的基准值。
设计稿量出来的px单位除以100就变成了rem的单位
5）最后一步，把写好的页面，迁移到其它屏上的，完成适配。
迁移的时候也需要换算单位

补充

如果使用媒体查询+rem来适配，需要写如下代码：
@media only screen and (width:750px) { html{ font-size: 100px; } }
@media only screen and (width:375px) { html{ font-size: 50px; } }
@media only screen and (width:320px) { html{ font-size: 42.6666px; } }
@media only screen and (width:414px) { html{ font-size: 55.2px; } }