rem是CSS3新增的一个相对单位，相对于根节点（html）字体大小的值，r就是root
例如：html{font-size：10px} 则2rem = 20px
通过它就可以做到只修改根元素的大小，就能成比例的调整所有的字体大小，只依赖html的字体大小。
适配方案步骤：
1、首先动态计算html的font-size
2、将所有的px换算成rem，计算过程请看下面代码和注释（注意：rem的换算是根据设计图稿的像素计算的，下面的计算只是动态计算html的font-size大小），请看下面的注意事项
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
font-size: 30px;
}
.box {
/*默认值 1rem=16px html字体大小16px */
width: 2rem;
height: 2rem;
/* font-size: 50px; */
background-color: aqua;
}
/* rem跟html 的字体大小,html字体大小变化,rem就会跟着变化 */
/* 总结:把页面内容的单位转换为rem,时刻改变html字体大小,即可完成适配(页面变大内容变大,页面变小内容变小) */
</style>
</head>
<body>
<!-- rem -->
<div class="box"></div>
</body>
</html>
Flex布局
flex布局是一种浏览器提倡的布局模型，它布局网页更简单、灵活，更是可以避免浮动脱标的问题
flex布局常用的属性值：
使用flex布局让父盒子里面的子盒子水平居中：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
/* 弹性容器 */
display: flex;
/* 水平居中 只有一个盒子 */
justify-content: center;
/* justify-content: space-around; */
/* justify-content: space-evenly; */
/* 侧轴居中 */
align-items: center;
}
/* 弹性盒子 */
.son {
width: 200px;
height: 200px;
background-color: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>