<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rem动态变化</title>
<style type="text/css">
@media screen and (min-width:320px){
html{
fone-size:50px;
}
}
@media screen and (min-width:640px){
html{
fone-size:100px;
}
}
.top{
height: 2rem;
font-size: 1rem;
background-color: #FFE4C4;
color: blue;
}
body {
background-color:lightgreen;
}
@media only screen and (max-width: 500px) {
body {
background-color:lightblue;
}
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
</html>
