工作流程：

所属部门，所做工作，前后端人员配比，前后端文档，接口联调，进入公司工作流程

产品经理：--原型图，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适配的时候在页面初始化的时候会遇到页面放大或者缩小的现象。怎么解决