1. rem是什么?
rem是一个长度单位
- px是绝对长度单位,最常用(但无法做响应式)
- em,相对长度单位,相对于父元素,不常用
- rem,相对长度单位,相对于根元素,常用于响应式布局
核心代码演示:
初始化:
<style>
html{
font-size: 100px;
}
div{
background-color: #ccc;
margin-top: 10px;
}
</style>
</head>
<body>
<p>rem 1</p>
<p>rem 1</p>
<p>rem 1</p>
<div>
this is div1
</div>
<div>
this is div2
</div>
<div>
this is div3
</div>
</body>
第一步,针对div,设置font-size:0.16rem;
html{
font-size: 100px; /*1rem等于html根元素设定的font-size的px值*/
}
div{
background-color: #ccc;
margin-top: