屏幕里的元素（图片文字 背景图片 精灵图）需要用rem表示，rem参考的是html中设置的font-size的大小，1rem=font-size的大小，所以当屏幕拉伸的时候，屏幕大小即html大小会变化，即设置的font-size会发生变化。
所以屏幕里的元素因为用rem表示，即会出现自适应的大小缩放，达到自适应的效果。
下面是手动的屏幕大小的变化，可以引入相应的js文件自动检测屏幕的大小，设置不同的font-size。
@media screen and (min- 320px) {
html {
font-size: 32px;
}
}
@media screen and (min- 360px) {
html {
font-size: 36px;
}
}
。。。。。。。。。。等等
拿到一个设计图时，会得到当前页面的宽度，eg：750px,
即此时设置的参考值font-size大小为75px,但其他的元素有自己的大小，也需要用rem表示，比如一个字体大小为20px，
需要换算，即20/75 rem 的大小 ，再进行屏幕的拉伸的时候，不同的屏幕大小会有不同的html里设置的font-size值，即可以换算成当前屏幕的大小，就达到了宽、高度随屏幕大小变化而自适应的效果。
假如
750/75 = w/? ，此时75px 为1rem， w为当前屏幕大小，？为屏幕改变的时候html的fontSize大小
媒体查询可以获取当前屏幕的范围，给html的fontSize设置不同的大小；
@media screen and (min- 360px) {
html {
font-size: 36px;
}
}
若用js来获取当前屏幕的大小var w = window.innerWidth;
给当前html的fontSize设置大小：
750/75 = w/? ？ = w/10
document.documentElement.style.fontSize = w / 10 + "px";(documentElement是html)
注意：
精灵图自适应的时候，除了相应的换位rem外，还需设置background-size：
精灵图的宽/设计图的font-size rem
精灵 图的高/设计图的font-size rem
解释：
精灵图是事先设置一个盒子或者用伪元素，大小由精灵图里的所需图片的大小决定；背景图整个精灵图默认在这个盒子盒子左上角放置，精灵图通过向左和向上移动，所需的精灵图图片会移动到这个盒子或伪元素里， 这个盒子或者伪元素正好截取到这个所需图片的大小，向上向左移动的大小为所需图片在精灵图里的x、y坐标。所以当屏幕大小改变的时候，这个盒子或者伪类大小也改变，所以这个区域截取精灵图的区域变大/变小，也就截不全或截不到精灵图里所需的图片。但当把这个精灵图的大小也等比例随屏幕大小变化，那么可以一直截到相应的精灵图图片。
.things ul li:nth-child(1)::after{
content: '';
1.28rem /* 96/75 */;
height: 1.28rem /* 96/75 */;
background: url(../images/icons.png)
no-repeat
0/* 120/75 */
-0.8rem /* 60/75 / / 90/75 */;
background-size: 6.933333rem 6.933333rem /* 520/75 */;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.533333rem /* 40/75 */;
}
用px2rem设置不同的设计图大小的font-size时，重启。