<!DOCTYPE html>
<html lang="en">
<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>responsive</title>
<style>
.container{
margin:0 auto;
max-width:800px;
display: flex;
border:1px solid black;
}
.left{
display: flex;
width: 200px;
background:red;
margin:5px;
}
@media (max-width: 640px){
.left{
display: none;
}
}
.right{
display: flex;
flex: 1;
background:blue;
margin:5px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
时高时低根深蒂固时高时低根深蒂固时高时低根深蒂固时高时低根深蒂固时高时低根深蒂固时高时低根深蒂固
</div>
<div class="right">
收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的收到货四粉红色的
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>responsive</title>
<style>
html{
font-size:20px;
}
.container{
margin:0 auto;
max-width:800px;
border:1px solid black;
}
.intro{
display: inline-block;
width:9rem;
height:9rem;
line-height: 9rem;
text-align: center;
border-radius: 4.5rem;
border:1px solid red;
margin:.3rem;
}
@media (max-width: 375px){
html{
font-size:24px;
}
}
@media (max-width: 320px){
html{
font-size:20px;
}
}
@media (max-width: 640px){
.intro{
margin:.3rem auto;
display: block;
}
}
</style>
</head>
<body>
<div class="container">
<div class="intro">
1
</div>
<div class="intro">
2
</div>
<div class="intro">
3
</div>
<div class="intro">
4
</div>
</div>
</body>
</html>