思路：
根据移动端型号不同总共分为4种：
1.小于768像素
2.大于768像素 小于922像素
3.大于922像素 小于1200像素
4.大于1200像素
用rem设置宽高，实现适配，根据老师的样例图，用 @media screen and (){}创建不同型号页面的设置，并且对于每个型号的页面进行不同情况的布局，每个页面中，用flex布局实现水平均匀分配，垂直居中
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@media screen and (max-width:768px) {
body,
html {
font-size: 30px;
}
.mbox div {
width: 2.66666667rem;
height: 2.66666667rem;
background-color: white;
border-radius: 50%;
}
.fox {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 9rem;
}
}
@media screen and (min-width:768px) {
body,
html {
font-size: 24px;
}
.mbox div {
width: 2.0833333rem;
height: 2.0833333rem;
background-color: white;
border-radius: 50%;
}
.fox {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 14rem;
}
}
@media screen and (min-width:922px) {
body,
html {
font-size: 24px;
}
.mbox div {
width: 2.0833333rem;
height: 2.0833333rem;
background-color: white;
border-radius: 50%;
}
.fox {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 19rem;
}
}
@media screen and (min-width:1200px) {
body,
html {
font-size: 16px;
}
.mbox div {
width: 1.875rem;
height: 1.875rem;
background-color: white;
border-radius: 50%;
}
.fox {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
}
}
.mbox {
display: flex;
flex-direction: column;
align-items: center;
}
.fox {
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="fox">
<div class="mbox">
<div></div>
<p>我是个头像</p>
</div>
<div class="mbox">
<div></div>
<p>我是个头像</p>
</div>
<div class="mbox">
<div></div>
<p>我是个头像</p>
</div>
<div class="mbox">
<div></div>
<p>我是个头像</p>
</div>
<div class="mbox">
<div></div>
<p>我是个头像</p>
</div>
<div class="mbox">
<div></div>
<p>我是个头像</p>
</div>
</div>
</body>
</html>
扫一扫
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
