html/css做一个简单的个人简历

今天闲着无聊做了个简单的小demo，做完了之后还是很无聊，就简单整理了下，写下了这篇文章。

话不多说，按照惯例先放效果图

上面是移动端的效果图，pc端布局一样，只是某些元素的大小略有不同

响应式主要是依靠媒体查询和vw，vh单位实现的

head标签里的代码如下

还是简单介绍一下vw，vh单位吧，vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。但是它相对的不是父节点或者页面的根节点。而是视窗（Viewport）大小。简单的说，就是把视窗的宽高均分为100份，1vw就是1%的视窗宽度，同理1vh就是1%的视窗高度。

再来看看body部分的代码

    

    Personal
    

    
个人简历


    姓      名:
山藏


    毕业院校:
家里蹲


    所学专业:
你猜


    联系电话:
010100101


    电子邮箱:
shanzang




    希望有个平台可以让我展现自己的才华!

还有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;
}
}

好了，今天的分享就到这里了，如果你有任何不懂的地方，都可以私聊我。