概述
media-query 来根据不同的屏幕宽度设置根元素 font-size，然后用rem作为单位
rem
rem是一个长度单位，根据 root 节点的 font-size 来计算当前节点的尺寸。
rem是一个长度单位，长度单位有：
1. px，绝对长度单位，最常用
2. em，相对长度单位，相对于父元素，不常用
3. rem，相对长度单位，相对于根元素，常用于响应式布局
rem 是css规范的语法，浏览器实现了此语法
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rem 演示</title>
<style type="text/css">
html {
font-size: 100px;
}
div {
background-color: #ccc;
margin-top: 10px;
font-size: 0.16rem;
}
</style>
</head>
<body>
<p style="font-size: 0.1rem">rem 1</p>
<p style="font-size: 0.2rem">rem 1</p>
<p style="font-size: 0.3rem">rem 1</p>
<div style="width: 1rem;">
this is div1
</div>
<div style="width: 2rem;">
this is div2
</div>
<div style="width: 3rem;">
this is div3
</div>
</body>
</html>
media-query
@media CSS规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。 使用它，您可以指定一个媒体查询和一个CSS块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该CSS块才能应用于该文档。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>响应式布局</title>
<style type="text/css">
@media only screen and (max-width: 374px) {
/* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
html {
font-size: 86px;
}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
/* iphone6/7/8 和 iphone x */
html {
font-size: 100px;
}
}
@media only screen and (min-width: 414px) {
/* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
html {
font-size: 110px;
}
}
body {
font-size: 0.16rem;
}
#div1 {
width: 1rem;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="div1">
this is div
</div>
</body>
</html>