最近学习了些移动web开发的基础知识，稍微做下记录总结：
- Hello,移动web： https://www.imooc.com/learn/494
一、基础知识
1. 关于Pixel
- px : CSS px，逻辑像素，浏览器使用的抽象单位
- dp，pt： device independence pixel 物理像素：设备无关像素
- dpr ： devicePixelRatio 设备像素缩放比
计算公式： 1px = （dpr）2 * dp 一个CSS像素对iphone5相当于4个物理像素
在一维上，一个CSS 像素，相当于两个物理像素。
- DPI：打印机每英寸可以喷的墨汁点
- PPI：屏幕每英寸的像素数量，即单位英寸内的像素密度，
PPI越高，默认的dpr越大。
以iphone 5 为例：
2. Viewport视图概念
作用
- 将页面渲染在一个默认980px（ios）的viewport中，andriod可自定义
- 缩放
viewport分layout viewport和visual viewport一般不使用默认的980的viewport，而是使用meta标签改变viewport。
3. Viewport_Meta标签
定义布局content宽度和缩放比，期望缩放比统一。
直接使用980的默认设置并不适合。
最佳实践：布局viewport = 设备宽度 = 度量viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 方案一：根据设备的实际宽度设计——手机宽320px，就用320px设计。
- 方案二：缩放比设为0.5，使得设备的物理像素等于抽象像素来设计。1px边框和高清图片不需要额外设计。
二、响应式移动Web排版布局
布局主要分为固定布局和流体布局，其中PC端的布局偏向于使用固定布局。但是移动端使用固定布局并不合适，因为移动端的屏幕尺寸呈现碎片化。移动端web需要有良好的自适应性。
1. Flex弹性盒布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。可根据元素的个数不同，自动填充容器。
1.1 Flex 使用
- 父元素使用flex布局：
display:flex；webkit内核的浏览器加前缀-webkit - 子元素可按照
比例划分或者混合划分：
| width:100px | flex:2 | flex:1 |
|---|
一般来说，图片的宽高是固定的，文字部分按照等比填充。
1.2 Flex 容器属性
Flex布局思维导图
| name | value | 备注 | |
|---|---|---|---|
| 1 | flex-direction | row (default) / row-reverse / column / column-reverse; | 决定主轴的方向（即项目的排列方向） |
| 2 | flex-wrap | nowrap (default) / wrap / wrap-reverse; | 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 |
| 3 | flex-flow | row nowrap (default) | flex-direction属性和flex-wrap属性的简写形式 |
| 4 | justify-content | flex-start (default) / flex-end / center / space-between / space-around; | 定义了项目在横向上的对齐方式。 |
| 5 | align-items | flex-start/ flex-end / center / baseline / stretch (default); | 定义项目在纵向上如何对齐。 |
| 6 | align-content | flex-start / flex-end / center / space-between / space-around / stretch (default); | 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 |
1.3 子元素属性
| name | value | 备注 | |
|---|---|---|---|
| 1 | order | init | 排列顺序。数值越小，排列越靠前，默认为0。 |
| 2 | flex-grow | number | 放大比例，默认为0。即如果存在剩余空间，也不放大。 |
| 3 | flex-shrink | number | 缩小比例，默认为1，即如果空间不足，该项目将缩小 |
| 4 | flex-basis | length eg:360px | 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 |
| 5 | flex | flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 | |
| 6 | align-self | auto / flex-start / flex-end / center / baseline / stretch; | 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 |
详细介绍：Flex布局语法教程
2. 使用媒体查询 MediaQuery
媒体类型：
- screen （屏幕）
- print （打印机）
- handheld （手持设备）
- all （通用）
常用媒体查询参数：
- width —— 视口宽度
- height —— 视口高度
- device-height —— 设备高度
- device-weight —— 设备高度
- orientation —— 检查设备处于横屏（landscape）还是竖屏（portrait）
设计点：
- 使用百分比布局，实现平滑适应
- 使用弹性图片（外加容器，图片使用100%宽度）
- 重新布局，显示与隐藏，隐藏冗余元素
经常需要切换位置的元素使用【绝对定位】，减少重绘，提高渲染性能
权衡利弊，不要为了响应式而响应式。
待续：高清图片和一像素边框问题
1. 关于高清图片：为了避免图片产生模糊，图片的宽高应该使用物理像素渲染。
2. 一像素边框，使用scaleY(.5).
3. 相对单位 em 和 rem
- em：以父节点的font-size为相对单位
- rem ：以html 的font-size 为相对单位 （推荐）
为了适应手机屏幕 rem = screen.width/10；rem可结合sass使用。
4. 多行文本溢出 加 ...
-webkit-box-orient:vertical;
-webkit-line-clamp: 3三、终端交互
1、使用自定义Tap事件代替click事件避免300ms问题，（Tap事件可能存在点透bug，遮罩层被点透）。
2、 Touch事件
- touchstart- touchmove- touchend- touchcancel
每个touch对象包含以下属性：
3、弹性滚动
body层滚动：
自带弹性滚动，overflow：hidden失效，GIF和定时器暂停
局部滚动：
div {overflow: scroll；-webkit-overflow-scrolling: touch;
}4、下拉刷新
使用touch事件，判断是否拉到顶层，如果是，对页面进行重新加载。
5、上拉加载
使用scroll事件。
