rem适配手机屏幕
em和rem记录在：https://blog.csdn.net/weixin_43389331/article/details/97262876
好像对比em之后，感觉rem更好方便一些，不过就是当拿到手机屏幕大小时，需要计算一些值会复杂些。
- 先确定把不同屏幕大小统一分为n等份的份数；
- 用每个屏幕的大小（screen）分别除以份数n ；screen%n=font-size大小：因为rem是根据根元素字号来变化的。
- 用媒体查询@media来设置不同屏幕下的html的字号；
- 为盒子设置宽高：用rem单位：
** 列子：**
320px, 360px, 375px, 414px不同手机屏幕大小；
- 分为20等份：
- 屏幕大小%等份数： 320%20=16； 360%20=18； 375%20=18.75； 414%20=20.7；
- 设置html字号大小
- 为盒子设置宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
/*
每个不同屏幕适配：
都分为20等份，用设计稿的标准宽度来除以20=？px;
如320%20=16px(字体字号)
* */
@media screen and (device-width: 320px){
html{
font-size: 16px;/*实际宽度16*20=160px*/
}
}
@media screen and (device-width: 360px){
html{
font-size: 18px;/*实际宽度16*20=160px*/
}
}
@media screen and (device-width: 375px){
html{
font-size: 18.75px;/*实际宽度16*20=160px*/
}
}
@media screen and (device-width: 414px){
html{
font-size: 20.7px;/*实际宽度16*20=160px*/
}
}
div{
width: 10rem;/*实际宽度就是=10*16px=160px*/
height: 10rem;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
这样就保证在不同屏幕下显示一样的效果了，自己可以在检查元素查看每一个不同手机屏幕下的宽高值。
![IOS7中的一些坑[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)