Flex弹性盒子布局已经特别样式处理

首先感谢慕课网碧仔老师的分享：http://www.imooc.com/learn/494

抽象单位  设备像素缩放比  设备无关像素
1px = (dpr)^2*dp

ppi = √（1136^2+640^2）/ 4英寸 = 326ppi(视网膜Retina屏)

ppi 越高，像素数越高 图形越清晰
但可视度越低，系统默认设置缩放比越大
    
ppi         120  160  240 320
默认缩放比  0.75  1.0  1.5  2.0

viewport 的作用：
1页面渲染在一个980px(ios)的viewport
2缩放

手机有两个viewport(可理解为：手机屏幕分为两层)
窗口缩放salce：度量viewport :visual viewport --> 视口

底层：布局 layout viewport -->=设备宽度 ，不是原页面的大小
如：ios默认viewport是980px
font-size为40px等于PC上12px同等物理大小 ，不规划

改变默认的viewport的大小：
<meat name="viewport" content="name=value,name=value">
width 设置布局viewport 的特定值（“device-width”）
initial-scale: 设置页面的初始缩放
minimum-scale:最小缩放
maximum-scale:最大缩放
user-scalable：用户能否缩放

JS获得默认的layout viewport
document.body.clientWidth

JS获得默认的visual viewport
window.innerWidth

====test====
<meta name="viewport" content="width=320">  --> 固定
<meta name="viewport" content="
width=device-width,-->布局veiwport==设备宽度
initial-scale=1,-->度量viewport == 布局viewport
user-scalable=no
">

移动web最佳viewport设置
布局viewport = 设备宽度 = 度量viewport


设计移动Web
方案一:根据设备的实际宽度来设计 320px
方案二：1px = 1 dp
缩放0.5 。根据设备的物理像素dp等于抽象像素px来设计。
1像素边框和高清图片都不需要额外处理

高效移动web布局
1响应式布局
2Flex弹性盒子布局

Flex弹性盒子布局兼容性：
ISO可以使用最新的flex布局
android4.4以下，只能兼容旧版本的flexbox布局
android4.4及以上，可以使用最新flex布局

响应式设计的一些参数媒体类型和查询参数：

1像素边框：

.sidebar .folder li{
    padding: 8px 0 8px 15px;
    color: #7c7c7c;
    cursor: pointer;
    position: relative;
}
.folder li + li:before{
    position: absolute;
    top: -1px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    border-top: 1px solid #ddd;
    -webkit-transform:scaleY(0.5);
}

相对单位rem:

单行和多行文本溢出：

/*单行文本*/
.inaline{
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
}
/*多行文本*/
intwoline{
    display: -webkit-box !important;
    overflow: hidden;

    text-over:ellipsis;
    word-break:break-all;

    -webkit-box-orient:vertical;
    -webkitline-clamp:2;  //可设置n行时溢出
}