像素基础

• px 逻辑像素，浏览器使用的抽象单位
• dp,pt 设备无关像素
• dpr 设备像素缩放比=独立像素 / 物理像素
• DPI 打印机每英寸可以喷的墨汁点（印刷行业）
• PPI 屏幕每英寸的像素数量，越高图像清晰@x @2x @3x

计算公式：1px=dpr²*dp(宽度和高度)

viewport

viewport用户网页的可视区域

默认viewport

layout viewport 浏览器默认viewport doucument.doucumentElement.clientWidth

visual viewport 浏览器可视区域大小 window.innerWidht

ideal viewport 理想viewport

iphone 4\5 320px

iPhone 6 375px

iPhone 6 Plus 414px

meta

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

content属性

width   设置layout viewport的宽度，解决了IE:无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度
initial-scale   设置页面的初始缩放值，解决了 iphone、ipad的毛病:无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度
minimum-scale   允许用户的最小缩放值
maximum-scale   允许用户的最大缩放值
height  设置layout viewport  的高度
user-scalable   是否允许用户进行缩放

当前缩放值 = ideal viewport宽度 / visual viewport宽度

flexbox弹性布局

flex inline-flex -webkit-flex

兼容性 iOS android 4.4 flex android 4.4 flexbox

区别写法

display:-webkit-flex;/display:-webkit-flex-box;

-webkit-flex:1;/-webkit-flex-box:1;

justify-content:center;/box-pack:center;

align-items:center;/box-align: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（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等
  • space-around：每个项目两侧的间隔相等
• align-items
  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
• align-content（了解）
  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

项目属性

• order 定义项目的排列顺序-1
• flex-grow 定义项目的放大比例
• flex-shrink 定义了项目的缩小比例
• flex-basis 项目占据的主轴空间
• flex flex-grow, flex-shrink 和 flex-basis的简写 比例
• align-self auto | flex-start | flex-end | center | baseline | stretch

相对单位

rem 相对html的font-size（推荐）

screen.width/20;

width:px/rem;

height:px/rem;

font-size保持一致

em 相对父节点的font-size

多行文本溢出...

单行文本溢出

.class{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis; 
}

多行

.class{
    display:-webkit-box;
    overflow:hidden;
    text-overflow:ellipsis;
    word-break:break-all;
    -webkit-box-orient:vertical;
    line-clamp:num;
}

事件

300ms延迟问题

Zepto.js自定义tap事件 touchstart touchend 间隔 touchmove

Tap透传问题

1. 使用缓动动画，过度300ms的延迟
2. 加入DOM元素作为中间层
3. 上下都使用tap事件（原生标签触发click事件）
4. 改用fastclick库

touch事件bug

Android只会触发一次touchstart，一次touchmove，touchend不触发

解决方案：touchmove event.preventDefault()

问题：默认行为不会触发

弹性滚动

问题

body层滚动：自带弹性滚动，overflow:hidden 失效 GIF和定时器会暂停

局部滚动：没有弹性滚动，不流畅

解决

iOS局部滚动开启弹性滚动/Android借助第三方

body{
    overflow:scroll;
    -webkit-overflow-scrolling:touch;
}

上拉加载scroll事件/下拉刷新

响应式设计

1. @media screen/all and (width/height/device-width/device-height/orientation:portrait | landscape){}
2. 百分比布局
3. 弹性图片
   • max-width:100%;height:auto;
   • background-size:contain/100% 100%/cover;
   • 为不同设备加载不同图片

高清图片

width:(width/dpr)px; height:(height/dpr)px;

Retina一像素边框@2x

li{
    position:relative;
}
li + li:before{
    position:absolute;
    top:-1px;
    left:0;
    content:'';
    width:100%;
    height:1px;
    border-top:1px solid #000;
    transform:scaleY(0.5);
}