发表于： 2020-07-15 21:53:07
2 1073
今天完成的事情
margin和padding的%都是从父元素的宽度取值。
学习vh和vw和自适应单位、
@media（min-width）（max-width）
基于以上做出来了九宫格。
明天计划的事情：
把网页传到github上，英语不好。加油。。
遇到的问题：
做出来的正方形格子，在不同分辨率下回变成长方形。
margin和padding的top和bottom用百分比取值时，和left和right一样都是基于复原的宽度取值。
都是在宽度上取值格子在不同分辨率下就可以一直是正方形了。
//猜测是为了符合直觉。避免上下左右设定一样的百分比，输出的值不一致。
学习vh和vw和自适应单位、
1.vw：1vw等于视口宽度的1%。
2.vh：1vh等于视口高度的1%。
3.vmin：选取vw和vh中最小的那个。
4.vmax：选取vw和vh中最大的那个。
pc端格子特别大。
用@media (min-width:1280px).给pc端设置不同的css。
<title>九宫格</title>
<style>
.a{
background-color: #FFFF00;
float: left;
width: 31%;
height:0;
padding-bottom: 30%;
margin:1%;
border-radius:10%;
}
.a4,.a7{
clear: both;
}
@media (min-width:1280px) {
.a{width: 5%;
height:0;
padding-bottom: 5%;
margin:0.5vmin;}
.a{
position: relative;
left: 41.75%;
}
}
</style>
</head>
<body>
<div class="b">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a a4"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a a7"></div>
<div class="a"></div>
<div class="a"></div>
</div>
</body>
返回列表
评论