移动web学习总结

最近学习了些移动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 为例:

移动web学习总结_第1张图片

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对象包含以下属性:
移动web学习总结_第2张图片

3、弹性滚动
body层滚动
自带弹性滚动,overflow:hidden失效,GIF和定时器暂停
局部滚动

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

4、下拉刷新
使用touch事件,判断是否拉到顶层,如果是,对页面进行重新加载。

5、上拉加载
使用scroll事件。

你可能感兴趣的:(移动Web)