移动端页面开发

像素

1px=dpr * dpr * dp

• px：逻辑像素，浏览器使用的抽象单位
• dp，pt设备无关像素，物理像素
• dpr：设备像素缩放比

viewport

viewport使手机浏览器先排版正确再缩放

• 页面渲染在宽高正常px的viewport
• 缩放

移动web最佳设置

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

flex弹性布局

• 等比布局：{flex:1}+{flex:1}+{flex:1}
• 混合布局：{flex:1}+{flex:2}+{flex:100px}

兼容性问题

• android4.4一下，只能兼容flexbox布局，不兼容flex布局
  

响应式布局

• 媒体查询
• 百分比布局
• 弹性图片：img宽度max-width:100%，外包div宽度变化
• 重新布局，显示与隐藏：需经常切换位置的元素可使用绝对定位

特别样式处理

相对单位rem

根据html的font-size，基值设device-width/20最好。用于阅读的字体font-size不适合用rem

高清图片避免模糊

宽高用物理像素渲染width:(w_val/dpr)px

1像素边框

用伪类和scale(0.5)

文本溢出

• 单行溢出（title类）
• 多行溢出（详情介绍）

// 单行文本溢出...
.inaline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
 
// 多行文本溢出
intwoline {
  display: -webkit-box !important;
  overflow: hidden;
   
  text-overflow: ellipsis;
  word-break: break-all;
   
  -webkit-box-orient: vertical;//垂直
  -webkit-line-clamp: 2;//保留2行文本
}

交互优化

tap事件

移动端click事件有300ms延迟，区分单双击
解决： 自定义tap事件代替，在touchstart和touchend记录时间和位置，200ms之内，非常小位移差值，并且没有触发touchmove事件，即触发手持设备的“click”，一般称为tap。
使用： 移动框架库Zepto.js

touch事件

弹性滚动

第三方库iscroll.js

下拉刷新

touch事件

上拉加载

scroll事件