响应式 和 移动 web

移动web 教程：http://www.imooc.com/learn/494

iphone5

问题一：6401136的图片，能否在iphone5上完全显示？
chrome下 iphone5：320568

物理像素 1136640 dp pt
逻辑像素 568320 开发用 px

px 逻辑像素
dp pt 设备无关像素
dpr 设备像素缩放比 iphone5的dpr=2

1px = dpr * dpr * dp

DPI 打印机
PPI 单位英寸内的像素密度 iphone ppi=326, 用物理像素计算

PPI越高 图像越清晰，系统默认设置缩放比越大 可视度越小

viewport
ios viewport = 980
安卓的不一定

在viewport中渲染 缩放
visual viewport
layout viewport

不用默认的980px布局viewport
fonts-size = 40px === pc 12px 不规范

meta
通过meta来改变viewport
w3cschool上没有响应的知识
meta格式：

常用的设置:
设置布局viewport的特定值 device-width
initial-scale：设置页面的初始缩放
minimum-scale
maximum-scale
user-scalable

布局viewport document.body.clientWidth
度量viewport window.innerWidth

width = device-width 设备宽度=布局viewport
缩放比设置为1 initial-scale=1:布局viewport=度量viewport
它自带width = device-width

<meta name='viewport' content='width=device-width,initial-scale=1,user-scaleable=no'>

设计移动web
方案一：根据实际宽度来设计
方案二：1px=1dp 缩放0.5 可以减少很多问题

web布局
响应式布局

弹性布局: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
混合划分：比如 图片是固定的，文字需要根据屏幕来自适应；
不定宽高的水平垂直居中：flex版

display: -webkit-flex;
justify-content: center;  //父元素
align-items: center;

flex-direction: row, row-reverse, column, column-reverse,
flex-wrap:nowrap(不会溢出,子元素不换行), wrap(子元素会换行),wrap-reverse
flex-flow: flex-direction flex-wrap
justify-content(用于父元素): flex-start(float:left), flex-end(float:right), center(居中), space-between(两边对齐), space-round(按间距划分)
align-self(用于子元素): flex-start flex-end center auto(stretch) baseline stretch
align-item(父元素):跟align-self的参数一致

align-content: 子元素换行，不会切分父元素的高度，而是按照原来的高度
order: 子元素排序

兼容性：
ios可以使用最新的flex布局
android4.4以下 只兼容旧版本的flexbox布局
android4.4以上，可以使用最新的flex布局
新旧效果一样，只是属性不同，推荐用旧的
autoprefixer nodejs

响应式设计
百分比布局
弹性图片 max-100%
重新布局 显示与隐藏

特殊样式处理
高清图片处理
在移动web页面渲染图片，宽高应用物理像素渲染，100100 应用100dp100dp 或者(w_value/dpr)px; height:(h_value/dpr)px;

一像素边框
在retina屏幕下的问题，1px使用2dp渲染
border: 0.5px 不行
scaleY(.5)

.single{
    80%;
    margin:0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
    height:100px;
    border:1px solid #ddd;
}
.op{
    position: relative;
    80%;
    height:100px;
    margin: 0 auto;
}
.op:before{
    position: absolute;
    top: -1px;
    left: 0;
    content: '';
     100%;
    height: 200px;
    border: 1px solid #ddd;
    -webkit-transform: scaleY(0.5);
}

相对单位rem
px有点固定，不能根据尺寸的大小来改变，使用相对单位更能体验页面兼容性
em:相对父节点
rem:相对html 推荐
rem的基值设置多少比较好？
rem = screen.width / 20 这是他推荐的，这样好吗？
font-size不使用rem：字体的大小是趋向于阅读的实用性，并不适合排版布局，同理 趋向于一些固定的元素的特性

终端交互优化
300ms click响应慢300ms，使用tap事件
touch和tap有什么不同 在手机上看下tap的效果
点透的bug：
解决方案
一：缓动动画
二：全部用tap 不用click 不完美
三：zepto已经被fixed
tap：自定义事件，由touch实现，demo自己实现的，zepto已经封装好了

安卓下有个bug：touchstart只会触发一次，touchmove只会触发一次，touchend不触发
解决办法：touchmove 加入 event.preventDefault()，导致默认行为不发生，如页面不滚动

弹性滚动
body层滚动：自带弹性滚动，overflow:hidden失效；gif和定时器暂停
局部滚动：没有弹性滚动，没有滚动惯性，不流畅

overflow: scroll;
-webkit-overflow-scrolling: touch;

body自带弹性滚动，如果想要局部弹性滚动，需要在body添加如上代码。
安卓不支持原生的弹性滚动，需要借助三方库 iScroll实现

下拉刷新