<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
//这里100/375=0.266666667 可以用插件px2rem
//去首选项里设置px2的font-size的大小 重启然后按f1或者ctrl+shift+p选择px2rem即可
html {
font-size: 26.666666vw;
}
.head {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.6rem;
}
.right,
.left {
width: 1rem;
height: 0.5rem;
background-color: #ccc;
border: 0.01rem solid #000;
}
.body {
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 0.7rem;
}
.box {
width: 1rem;
height: 1rem;
background-color: red;
}
</style>
</head>
<body>
<div class="main">
<div class="head">
<div class="right"></div>
<div class="left"></div>
</div>
<div class="body">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="body">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
