本篇文章主要介绍了"Flex弹性盒子布局已经特别样式处理"，主要涉及到方面的内容，对于移动开发感兴趣的同学可以参考一下：
首先感谢慕课网碧仔老师的分享：http://www.imooc.com/learn/494抽象单位 设备像素缩放比 设备无关像素1px = (dpr)^2*...
首先感谢慕课网碧仔老师的分享：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的大小：
响应式设计的一些参数媒体类型和查询参数：
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行时溢出
}
以上就介绍了Flex弹性盒子布局已经特别样式处理，包括了方面的内容，希望对移动开发有兴趣的朋友有所帮助。
本文网址链接：http://www.codes51.com/article/detail_252250.html
