Sunly

移动端的设计方案：

js和CSS跨平台
- 尽量使用原生js，不使用框架，框架太大，加载速度慢
1. zepto 精简的jquery
2. 大小需要自适应的图标做成字体
3. 根据项目模块化移动端的常用组件
  1. touch对应的swipe事件
  2. 各种滑动翻页效果
  3. 拉拽刷新
4. 字体设置选择无衬线字体
```
body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
```
5. 设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为
```
a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}
```
移动端布局
- media媒体查询功能；根据视口大小，解析度，方向等，选择性应用内容样式。
```
@media screen and (min-width:750px) and (max-width:799px) {
    html {
        font-size: 23.5px
    }
}
```
1. viewport meta标签；指定在用户设备的浏览器中的网页的缩放比例
  - viewport的功能是浏览器布局实现中用来约束网页中最顶级块级元素的。viewport实际上等于浏览器窗口，它的大小是由浏览器特性所决定的，一旦页面渲染完成，无所是缩放操作还是其他什么操作都不会让它变化。那么我们可以用元素来度量它。
  1. 移动端的viewport会比PC端的稍微复杂一点，分为layout viewport和visual viewport。visual viewport是页面当前显示在屏幕上的部分，用户可以通过滚动来改变他所看到的页面部分，或者通过缩放来改变visual viewport的大小。layout viewport就是一个页面渲染之后具有固定大小的大框，跟之前提到PC上的概念相似，我们知道它的大小是由浏览器特性来决定的。
  2. document.documentElement.clientWidth/Height就是viewport的大小
  3. 度量visual viewport是通过window.innerWidth/Height来度量的，当然单位也是CSS像素。
  4. 放大或缩小是改变了CSS像素与设备像素的比值
  5. 设置如下
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
    它的作用是调整layout viewport的宽度；
2. 页面布局
  各有优缺点：
  - 流式布局
    - 流式布局实际上就是百分比宽度 + 固定高度
    - border-radius等不能等比缩放
  - 响应式布局
  - rem
    - 使用rem，是HTML fontsize倍数的表示；em是父元素fontsize的倍数表示；
    - 本来16px的字显示已经够大，但由于使用了rem，在屏幕变大的同时，字体变大或导致翻页
  - flex弹性盒子布局
性能优化
1. 图片优化。为了解决那些带宽小或者流量费用昂贵的用户，你可以通过根据用户的屏幕尺寸和分辨率加载合适的图片来优化图片的加载。你可以通过媒体查询来获取屏幕的 height，width 以及 pixel ratio。
2. 压缩
3. 数据离线化，考虑将数据缓存在 localStorage
4. 能用css画的图不要用图片，尽量使用css动画
屏幕分辨率PPI（理解CSS像素与设备像素）
1. PPI全称为Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。
2. 一个设备的PPI是一个定值
3. 移动端下PPI增高，要注意设计页面的时候图像的分辨率问题。
4. 同时默认分辨率情况下，一个点物理像素点对应于一个分辨率像素。

参考资料：