所属部门，所做工作，前后端人员配比，前后端文档，接口联调，进入公司工作流程
产品经理：--原型图，UI 画UI图 --- 前端1：1还原UI设计图 --- 前后台同时开发（开发文档）
移动端和兼容
响应式网站:
兼容遇到的问题：解决方法，比如说刘海屏的兼容，响应式原理，移动端屏幕适配，比如：
移动端屏幕适配
设备像素比 1:1 Retina屏幕 2-3
rem, px, em, cm vw vh %
淘宝做法：
(function(doc){
var baseSize=40;
var baseWidth=640;
var maxWidth=480;
var lastWidth;
var timeoutAdjust;
var html=doc.getElementsByTagName("html")[0];
var adjust=function(){
var width=Math.min(html.offsetWidth,maxWidth);
if(lastWidth!=width){
html.style.fontSize=(baseSize/baseWidth*(lastWidth=width))+"px";
}
};
addEventListener("resize",function(){
adjust();
clearTimeout(timeoutAdjust);
timeoutAdjust=setTimeout(adjust,50);
},false);
adjust();
}(document));
普通做法：
/* 设计稿是750,采用1：100的比例,font-size为100 * (docEl.clientWidth * dpr / 750) */
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
rem = 100 * (docEl.clientWidth * dpr / 750);
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用，解决图片模糊问题和1px细线问题
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
移动端显示1px的问题
由于高清屏的特性，1px是由2×2个像素点来渲染，那么我们样式上的border:1px在Retina屏下会渲染成2px的边框，与设计稿有出入，为了追求1px精准还原，我们就不得不拿出一个完美的解决方案
1.用小数来写px值
IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
2.缩放解决
/* 设计稿是750,采用1：100的比例,font-size为100*(100vw/750) */
.border-1px {
position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-1px:before {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
border-top: 1px solid #D9D9D9;
color: #D9D9D9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
在使用rem适配的时候在页面初始化的时候会遇到页面放大或者缩小的现象。怎么解决
