响应式 和 移动 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格式：

常用的设置:

width: 设置布局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-width:100%

重新布局 显示与隐藏

特殊样式处理

高清图片处理

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

一像素边框

在retina屏幕下的问题，1px使用2dp渲染

border: 0.5px 不行

scaleY(.5)

.single{
    width:80%;
    margin:0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
    height:100px;
    border:1px solid #ddd;
}
.op{
    position: relative;
    width:80%;
    height:100px;
    margin: 0 auto;
}
.op:before{
    position: absolute;
    top: -1px;
    left: 0;
    content: '';
    width: 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实现

下拉刷新