<!DOCTYPE html>

<meta charset="UTF-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
    *{
        padding: 0;
        margin: 0;
    }
    @media screen and (min-width: 320px) {
        html{
            font-size: 50px;
        }
    }
    @media screen and (min-width: 640px) {
        html{
            font-size: 100px;
        }
    }
    .top{
        height: 1rem;
        font-size: .5rem;
        background-color: green;
        color: #ffffff;
        text-align: center;
        line-height: 1rem;
    }
</style>
<title>响应式布局</title>


<div class="top">购物车</div>


表示vertial-align的值为设置该样式的元素的当前line-height 的高度的一半；
width: 1rem 1 表示width的值为1 倍的dom文档的html标签上font-size的值，即如果html的font-size为14px，那么width的值就是1倍的14px，即14px.