为什么一个UI设计师要学习前端语言？
因为那一像素的恩怨情仇！作为一个UI最大的心愿，当然是看到自己的作品能够被开发者们完美的复制出来。
可是，每次项目实装，总会遇到开发者们各种理由：这里就这样吧、差一像素而已、差0.x像素而已啦，不影响整体效果啦......等等的“借口”几乎每个项目都会出现。
作为一个UI，基本的傲娇还是必须要有的，总觉得不就一像素嘛，你写一个 margin：1px；不就能行了吗？用得着找这么多理由吗？真的怀疑你们开发者的水平！
然后开发者怒怼：YOU CAN YOU UP ！！
结局就是，我彻底蔫儿了！因为我不行，我想上了上不了。每次都是开发者赢，我想不明白这其中的困难点在哪里。
直到上一个项目，我作为一个产品的角色参与，在写了整个项目的画面定义书（PRD）之后，我深深体会到了，原来自己是多么无知，实装中需要应对的问题，不是PS里面上移一像素那么简单的，因为要考虑各种平台（电脑、iOS、Android、Pad），各种浏览器（Chrome、Safari、IE、Firefox、以及手机的QQ浏览器、UC浏览器等等），各种适配缩放问题。
于是我决定学习一门语言，前端对于我来说是最好的选择。
零零散散的学习一个月之后，公司来了一个比较基础的项目。页面很简单，就是一些图片，拼拼凑凑而已，两位老师（宋老师和陈老师平时对我的学习很关注，所以她俩就是我的老师）鼓励我尝试实战，然后我在犹豫几分钟之后就应下了这门差事。毕竟切图对我来说可谓轻车熟路嘛！然后跌宕起伏的三日就来了......
正文
没错，这里才是正文。惊喜不惊喜？
项目第一日
UI设计师傲娇情怀作祟，第一日的作业，完全按照自己认为的那样写，不就拼拼凑凑嘛，于是整个样式表用了各种大量固定值：
.share-box img{
float: right;
margin: 7px 5px;
margin-bottom: 30px;
}
.main-staff-box{
margin: 0 auto 30px auto;
width: 1100px;
height: 423px;
position: relative;
z-index: 999;
}
（老司机们一看就知道会发生什么恐怖的事情了吧？）
就这样，洋洋洒洒写了500多行代码。第一天加班到晚上10：30，差点赶不上最后一趟地铁。可是，写完第一个页面之后，心里是很高兴的，因为比对PC版的设计稿，还原度95%以上。
心里老佩服自己了！感觉可牛逼了。哇塞！乐开了花！忍不住向大家展示我的学习成果，于是拍照发朋友圈，收到了热评，很多人为我点赞。（项目未发布，就展示了部分画面，涉嫌侵犯保密协义，后来被总监批评了。大家引以为戒！）
前端也不过如此嘛！
但是......没错，好戏不长。
项目第二日
我的代码提交到git上的，然后恬不知耻想在两位老师那里获取好评，迫不及待的让她们帮忙review我的代码。然后得到的反馈大致是这样的：
1、打开浏览器：哇塞！真不错，没发现什么问题呢！
2、缩放：这里有些小问题呢！
3、再缩放：这TM什么鬼？？？
借用宋老师一句名言：
前面没有按规范写的一行代码，后面需要100行代码来补这个锅。
所以，项目第二日和第三日都在补第一日的锅，还逼得两位师傅一起上阵，她俩任何一个人一天能完成的项目，变成了3个人3天才做完......
第一次前端项目实战的收获
一、打破了UI式思维方式
短短三日，让我重新认识了开发者们的不易，打破了我以前UI式的思维方式，不是给张图，margin/padding挤一挤就可以交差了的。从此以后仰视开发者们！
虽说UI做效果图的时候也会考虑多平台，多终端的设计稿，现在看来有些纸上谈兵了，没有从开发着角度去设计，真正实现的方式不是Ctrl+T拉伸缩放那么简单。
作为一个效率型敏捷开发公司的UI设计师，设计稿在满足客户需求的前提下，应当具备考虑更多的开发者便利的设计思维。
达到一种效果有很多种办法，我们应该尽量选择大家都能简化工作的办法。
二、学会很多新的前端知识
1、学会了使用flex-box基础知识
我整理了flex布局的一些基础知识 flex布局 ,有兴趣的可以前往。
在这里分享几个非常有用的布局：
基本布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex box</title>
<style media="screen">
* {-webkit-box-sizing: border-box; box-sizing: border-box;}
.container div{ background-color: red; border: 1px solid #333; }
.div1{width: 70px; height: 70px;}
.div2{width: 50px; height: 50px;}
.div3{width: 60px; height: 60px;}
.container{width: 299px; height: 300px; background-color: #f0f0f0;}
</style>
</head>
<body>
<div class="container">
<div class="div1">盒1</div>
<div class="div2">盒2</div>
<div class="div3">盒3</div>
</div>
</body>
</html>
- 等间距分布
.container{
justify-content: space-evenly; /*每个项目间隔相等。所以，项目之间的间隔与边框的间隔一样大*/
}
- 两端对齐
.container{
justify-content: space-between; /*两边的项目贴边对齐，中间的均匀分布*/
}
- 垂直、水平居中
.container div{
display: flex; /* 让盒子里面的文字垂直、水平居中*/
justify-content: center;
align-items: center;
}
.container{
display: flex; /* 让三个子盒子基于父盒子垂直水平居中*/
justify-content: center;
align-items: center;
}
2.切实体会到了响应式布局中“%”单位的实际使用方法，以及“%”和“px”布局的差异化。
在项目开始的时候，宋老师就说了不要用px作为单位，我不以为然，心想我平时作图不就用px作为单位吗，而且看了那么多教程都用的px作单位，尤其第一天作业完成之后，px效果依然很好啊！
这让我付出了比较沉重的代价来修复它所带来的后果。贴一下修改后的代码：
.main-staff-box {
position: absolute;
z-index: 999;
top: 2%;
width: 100%;
max-width: 1100px;
height: 100%;
padding-top: 3%;
display: flex;
flex-direction: column;
align-items: center;
}
3.有了多屏幕适配的实战经验
此次项目虽然只有一个页面，但是需要适配Chrome、Safari、Firefox、IE11；手机需要适配iPhone5、iPhone7、iPhone7 plus、iPhone X 、iPad、iPad Pro还要适配他们横屏显示。
由于页面比较小的原因，PC还没出现太大的问题，主要问题在于手机端，每个手机的显示方式都不太一样，Chrome的模拟器模拟的情况和真机测试差别很大。对于一个没有实战经验的小白来说，这真的非常痛苦。
不止这些，PC上还有缩放不一致的问题，压缩到一定程度布局就会崩溃，要知道，不是所有用户的屏幕尺寸都是1920x1080的，就算是都是这么大的，浏览器的窗口有可能只开了一半的大小。
解决这些问题就是用了多个媒体查询来修补不同屏幕的误差问题，比如下面的代码：
@media screen and (min-width: 782px) and (max-width: 1099px) {
.staff-bgimg {
min-height: 400px;
}
.staff-contant-box {
padding: 0.5%
}
.story-box {
padding-bottom: 5%;
}
.sub-box {
padding:5%;
}
.inforb {
padding-top: 2%;
}
}
@media screen and (min-width: 1100px) {
.story-box {
height: auto;
padding-bottom: 5%;
}
.infor-box {
height: auto;
padding-top: 3.5em;
padding-bottom: 5em;
}
.infor-contant {
padding-top: 4%;
}
.inforb {
padding-top: 2%;
}
}
还尝试使用了“em” “vh”这两个单位，有的时候不同的单位就能解决很多布局问题了。
- em
em单位是和字体大小有关：
如果 元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按 父元素字体大小 下面的公式来计算
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
如果 元素设置了字体大小，那么字体大小的转换 依旧按父元素字体大小公式计算，也就是下面的：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
如果 元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：
1 ÷ 元素自身的font-size × 需要转换的像素值 = em值
- vh
CSS中相对长度单位，表示相对视口高度（Viewport Height）。
1vh = 1% * 视口高度
视口比例长度定义了相对于视口的长度大小，这是文档的可见部分。
三、理解了为什么这一像素那么难
这一像素在不同屏幕上的显示不相等。在这个屏幕上一像素对齐了，可能就会影响到其他屏幕的布局。所以UI设计师在设计的时候应该考虑到一些布局上的细节，比如可以尝试试用100% 作单位来做设计图。
还有一个体会就是，CSS很多知识点就算你知道，没有在实际项目中使用过，你就不会知道它存在的意义到底是什么！
四、尝试了使用命令行提交代码到github
命令行我之前了解过，但是没有实际的在项目中使用，这次两位老师修改我的代码，都是通过GitHub来管理，感觉非常厉害。这里整理下本次项目使用到的部分命令，后面专门整理一个github的命令相关的笔记。
git add (file_name) //把你的文件添加到git的追踪目录下 (你也可以用git add .来添加所有的文件)
git status //用来查看你现在的分支状况（是否有修改，有哪些修改，修改了哪些文件）
git commit -m 'your message' //这一步是把你的本地修改保存起来。在这个基础上你切其他分支的话,刚修改的内容都不会丢失
git push origin (current branch name) //把你本地的修改push到远程这个同名分支上去。
git pull //取回远程仓库的变化，并与本地分支合并
git pull origin master //从master拉取
在这里非常感谢两位老师帮我补这个锅！没有她们帮忙，这个项目不能按时交付。
在这里贴一下客户对此次项目的反馈吧：
全体的にとてもいいです。ありがとうございます。
还是非常开心的！
