今天闲着无聊做了个简单的小demo,做完了之后还是很无聊,就简单整理了下,写下了这篇文章。
话不多说,按照惯例先放效果图
上面是移动端的效果图,pc端布局一样,只是某些元素的大小略有不同
响应式主要是依靠媒体查询和vw,vh单位实现的
head标签里的代码如下
<title>个人简历</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
还是简单介绍一下vw,vh单位吧,vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。但是它相对的不是父节点或者页面的根节点。而是视窗(Viewport)大小。简单的说,就是把视窗的宽高均分为100份,1vw就是1%的视窗宽度,同理1vh就是1%的视窗高度。
再来看看body部分的代码
<header>
<div class="rect" style="float:left"></div>
Personal
<div class="rect" style="float:right"></div>
<div class="title">个人简历</div>
</header>
<section>
姓 名:<p>山藏</p><br><br>
毕业院校:<p>家里蹲</p><br><br>
所学专业:<p>你猜</p><br><br>
联系电话:<p>010100101</p><br><br>
电子邮箱:<p>shanzang</p><br><br>
</section>
<footer>
希望有个平台可以让我展现自己的才华!
</footer>
还有css部分的代码
section p{
border-bottom:1px solid #234064;
display: inline-block;
}
.title{
border:3px solid #243e5d;
font-size: 2rem;
margin:20vh 10vw 0 10vw;
padding:10vh 0vw;
}
header{
width:100%;
text-align:center;
font-size: 2em;
background: #faf6f3;
padding:20vh 0 20vh 0;
}
section{
background: #faf6f3;
text-align:center;
height:16em;
}
footer{
background: #faf6f3;
text-align: center;
height:6vh;
}
响应式主要改变了在不同的像素宽下,body占整个页面的的比例,像素宽低于500的时候,body部分所占比例是100%,但是如果屏幕宽度过宽的话,简历就显的很宽,所以像素宽大于640的话,将比例设置为了60%。
剩余css代码为
*{
margin:0vw;
padding:0vw;
}
@media screen and (max-width: 640px){
body{
color:#234064;
max-width:100%;
font-size:14px;
}
.rect{
width:25vw;
background:#243e5d;
height: 8vh;
border-radius: 10vw;
}
section p{
width:45vw;
}
}
@media screen and (min-width:500px){
body{
max-width: 60%;
color:#234064;
margin:0 auto;
border:6px groove #d4d4d4;
}
.rect{
width:18vw;
background:#243e5d;
height: 8vh;
border-radius: 0.8em;
}
section p{
width:26vw;
}
}
好了,今天的分享就到这里了,如果你有任何不懂的地方,都可以私聊我。