「青训营 X 码上掘金」制作一个自适应屏幕的个人名片
当青训营遇上码上掘金
此文章参加青训营码上掘金活动
简介
在日常生活中，名片通常作为人际交往中让对方迅速了解我们的一种手段，作为一名前端开发人员，自然使用代码制作名片向对方介绍自己更为妥当。
名片成品展示（图片引入其他在线图片，可能加载需要一定时间）：
那么一个名片，起码要符合以下几个条件
1.美观性
前端开发中，还原设计图是每个前端从业人员的基本技能，做出的前端界面简洁美观与否也是评判一名前端工程师的重要标准，往往一个较为美观的名片会更吸引其他人的注意。
2.简洁性
一个名片应该尽可能的简介，只需要突出你想让对方了解到的信息。
3.自适应
代码名片有一个问题，那就是对方可能使用pc，手机，平板等各种设备查看你的名片，所以我们的代码应该能够适应不同尺寸的屏幕，使得无论对面屏幕什么尺寸，都能够正常查看我们的名片，这个时候就需要用到媒体查询了。
具体思路
HTML
之前说到，我们的名片要尽可能的简介，因此名片的html结构不应该包含太多内容，这里我的HTML结构仅仅包含一张图片，名片的日期，标题，和介绍自己的文本，以及一个链接，以便对方查看你的主页。
<div class="card-box">
<div class="card-box-inner">
<div class="inner-img">
<img src="https://source.unsplash.com/LJ9KY8pIH3E" alt="">
</div>
<div class="card-content">
<span class="card-content-data">
14 February 2023
</span>
<div class="card-content-title">
Introduce Myself
</div>
<div class="card-content-text">
My name is Chang Feng. At present, I am studying and hope to be engaged in the position of front-end
development engineer. I participated in the ByteDance Youth Training Camp this holiday, which
enriched and consolidated my front-end knowledge and benefited me greatly.
</div>
<a href="#" class="card-button">Read Me</a>
</div>
</div>
</div>
美观性---css
我们的名片要尽可能的美观，因此我们的css代码要尽可能使用色调相同的颜色，给body添加适合的背景颜色,并且给dom添加合适的圆角，以增添美观性。 同时，我们的代码也应该具有简介优雅的特性，因此在布局中我们会使用到flex布局，因为一张名片很显然是一个二维结构，这种布局可以使我们相对容易的定义名片的布局。
body {
background-color: #7e71f3;
background-image: linear-gradient(147deg, #7e71f3 0%, #8bb5f3 74%);
min-height: 100vh;
font-family: "Fira Sans", sans-serif;
display: flex;
}
.card-box {
width: 95%;
position: relative;
max-width: 800px;
margin: auto;
background: #fff;
box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
padding: 25px;
border-radius: 25px;
height: 400px;
transition: all 0.3s;
}
.card-box-inner {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
display: flex;
align-items: center;
}
.inner-img {
width: 300px;
flex-shrink: 0;
height: 300px;
background-image: linear-gradient(147deg, #7e71f3 0%, #8bb5f3 74%);
box-shadow: 4px 13px 30px 1px rgba(11, 39, 100, 0.2);
border-radius: 20px;
transform: translateX(-80px);
overflow: hidden;
}
.inner-img>img {
width: 100%;
height: 100%;
}
.card-content-data {
color: #7b7992;
margin-bottom: 15px;
display: block;
font-weight: 500;
}
.card-content-title {
font-size: 24px;
font-weight: 700;
color: #0d0925;
margin-bottom: 20px;
}
.card-content-text {
color: #4e4a67;
margin-bottom: 30px;
line-height: 1.5em;
}
.card-button {
display: inline-flex;
background-image: linear-gradient(147deg, #7e71f3 0%, #8bb5f3 74%);
padding: 15px 35px;
border-radius: 50px;
color: #fff;
box-shadow: 0px 14px 80px rgba(11, 39, 100, 0.2);
text-decoration: none;
font-weight: 500;
justify-content: center;
text-align: center;
letter-spacing: 1px;
}
适配屏幕——————媒体查询
为了让对方在任何尺寸的屏幕上都能够查看我们的名片，我们需要使用媒体查询这一技术，根据不同的屏幕尺寸，来修改我们的css样式。 CSS3中的媒体查询，它可以根据用户设备的尺寸不同而调用不同的样式。它是一种向不同设备提供不同内容的简单而有效的方式，最常用的查询是处理视口高度和宽度的查询。
代码中，我们主要干了两件事情：
- 若对面的屏幕宽度或者高度较小，则适当的减小我们的dom元素的宽高
- 若独眠的屏幕宽度小到一定程度，则此时的名片已经不适合横向展示，这个时候调整flex布局的轴，改为纵向排列，同时对样式做出细微的调整
@media screen and (max-width: 992px) {
.card-box {
max-width: 680px;
height: 400px;
}
}
@media screen and (max-width: 768px) {
.card-box {
min-height: 500px;
height: auto;
margin: 180px auto;
}
}
@media screen and (max-height: 500px) and (min-width: 992px) {
.card-box {
height: 350px;
}
}
@media screen and (max-width: 768px) {
.card-box-inner {
flex-direction: column;
}
}
@media screen and (max-width: 768px) {
.inner-img {
transform: translateY(-50%);
width: 90%;
}
}
@media screen and (max-width: 576px) {
.inner-img {
width: 95%;
}
}
@media screen and (max-height: 500px) and (min-width: 992px) {
.inner-img {
height: 270px;
}
}
@media screen and (max-width: 768px) {
.card-content {
margin-top: -80px;
text-align: center;
padding: 0 30px;
}
}
@media screen and (max-width: 576px) {
.card-content {
padding: 0;
}
}
到这里，名片制作就结束啦，完整代码可以到码上掘金平台查看
