1.1.1 流式布局

其实  流式布局  就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

这样的布局方式  就是移动web开发使用的常用布局方式

1.1.2 Viewport

  1. 我们猜想下pc页面在移动设备上显示情况。

放不下，缩放？

  1. 我们测试下pc页面在移动设备上显示。

默认的缩放的显示的

  1. 认识viewport

在移动端用来承载网页的这个区域，就是我们的视觉窗口，viewport（视口）,这个区域可是设置高度宽度，可是按比例放大缩小，而且能设置是否允许用户自行缩放。

 

width：宽度设置的是viewport宽度，可以设置device-width特殊值

initial-scale：初始缩放比，大于0的数字

maximum-scale：最大缩放比，大于0的数字

minimum-scale：最小缩放比，大于0的数字

user-scalable：用户是否可以缩放，yes或no（1或0）；

 

 

用meta标签把viewport的宽度设为device-width，同时initial-scale=1，user-scalable = 0就构建了一个标准的移动web页面

 

1.1.3 Retina屏

所谓“Retina”是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

物理像素 像素点

屏幕尺寸

1.2 首页切图

 

如果1：1的显示在移动设备当中  图标会失真

在行业中通用的设计稿

 

目的  熟练的时候百分比布局

 

首页的布局：是以百分比布局为主的  定最小宽度和最大宽度的布局。

 

适用：图片比较多的首页，门户，电商 等。

 

 

1.3 移动端事件

Touch

touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指

 

touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，

会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动

 

touchend：当手指离开屏幕时触发

 

touchcancel：系统停止跟踪触摸时候会触发。

例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

触摸事件的响应顺序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick  300ms延时

 

 

Event

originalEvent （原生事件） 是jquery 封装的事件。

targetTouches 目标元素的所有当前触摸

changedTouches 页面上最新更改的所有触摸

touches 页面上的所有触摸

 

注意：在touchend事件的时候event只会记录changedtouches