一、流式布局
1、 什么是流式布局
流式布局就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充，同时会设定最小宽度和最大宽度，适用于图片比较多的首页、门户、电商等。
在这里我们以京东的M站为例进行说明：
可以看到，在京东各个模块的主容器中，都设置了最大最小宽度和宽度100%，而在导航区块中，由于一行有5个小区块，所以设置了宽度为20%，使得小区块也能达到自适应的效果。
2、 viewport
在移动端用来承载网页的这个区域就是我们的视觉窗口
viewport，这个区域可以设置高度宽度，可以按比例放大缩小，而且能设置是否允许用户自行缩放。
- width：设置的是
viewport宽度，可以设置device-width特殊值。 - initial-scale：初始缩放比，大于0的数字，一般设置为1.0。
- maximum-scale：最大缩放比，大于0的数字。
- minimum-scale：最小缩放比，大于0的数字。
- user-scalable：用户是否可以缩放，yes或no（1或0）。
<!--视口标签通可以使用 meta:vp + tab 来快速生成，通常我们可以设置为下边这样。--> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
二 、 移动端常见事件
1、touch事件
- touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指。
- touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用
event的preventDefault()可以阻止默认情况的发生：阻止页面滚动。 - touchend：当手指离开屏幕时触发。
- touchcancel：系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面
alert()一个提示框，此时会触发该事件，这个事件比较少用。
触摸事件的响应顺序：
ontouchstart --> ontouchmove --> ontouchend --> onclick(300ms延时)。
2、event事件
- originalEvent：（原生事件）是
jquery封装的事件。� - targetTouches：目标元素的所有当前触摸。
- changedTouches：页面上最新更改的所有触摸。
- touches：页面上的所有触摸。注意：在
touchend事件的时候event只会记录changedtouches。
三、响应式开发
1、什么是响应式开发
在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。
通常的做法是针对移动端单独做一套特定的版本。
但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及）。
那么
Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。
2、响应式开发的前景
现在的移动设备屏幕越来越大。
越来越多的设计师也采用了这种设计。
在新建站的一些网站现在普遍采用的响应式开发。
那么在前端开发当中也是一项必备的技能。
3、 响应式开发的原理
CSS3中的
Media Query（媒介查询），通过查询screen的宽度来指定某个宽度区间的网页布局。
- 超小屏幕：768px以下（移动设备）。
- 小屏设备：768px-992px。
- 中等屏幕：992px-1200px。
- 宽屏设备：1200px以上。
四、Bootstrap框架
1、Bootstrap简介
- 官方网站
- Bootstrap中文网
- 它是由
Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。它提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。 -
Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。 -
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。
2、Bootstrap常用样式
-
container类：用于定义一个固定宽度且居中的版心。
1 <div class="topbar"> 2 <div class="container"> 3 <!-- 4 此处的代码会显示在一个固定宽度且居中的容器中 5 该容器的宽度会跟随屏幕的变化而变化 6 --> 7 </div> 8 </div>
栅格系统：Bootstrap中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比。
-
row类：
- 因为每一个列默认有一个15px的左右外边距。
-
row类的一个作用就是通过左右-15px屏蔽掉这个边距。
<div class="container"> <div class="row"></div> </div>
col-xx-x类：
- 第一个连接符后边写屏幕尺寸，有
xs超小屏幕 手机(<768px)、sm小屏幕 平板 (≥768px)、md中等屏幕 桌面显示器(≥992px)、lg大屏幕 大桌面显示器 (≥1200px)四种。 - 第二个连接符后边表示对应的份数，占12份中的几份
1 <div class="row"> 2 <div class="col-md-2 text-center"></div> 3 <div class="col-md-5 text-center"></div> 4 <div class="col-md-2 text-center"></div> 5 <div class="col-md-3 text-center"></div> 6 </div>
hidden类：设置在不同的屏幕下隐藏。
<div class="hidden-xs,hidden-sm,hidden-md,hidden-lg"> </div>
text-xx类：设置文字的对齐方式。
text-center 文本居中
text-left 文本左对齐
text-right 文本右对齐
pull-xx类：设置浮动。
pull-left 左浮动类
pull-right 右浮动类
-
center-block类：让一个固定宽度的元素居中。
3、字体图标
-
字体图标：
@font-face {
font-family: 'XXX';
src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'),
url('../font/MiFie-Web-Font.svg') format('svg'),
url('../font/MiFie-Web-Font.ttf') format('truetype'),
url('../font/MiFie-Web-Font.woff') format('woff');
}
字体文件格式：
eot：embedded-opentype
svg：svg
ttf：truetype
woff：woff
4、轮播图插件 Carousel
-
基本的轮播图实现：
1 <!-- 2 以下容器就是整个轮播图组件的整体， 3 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图 4 bootstrap.js会自动为当前元 素添加图片轮播的特效 5 --> 6 <div id="轮播图的ID" class="carousel slide" data-ride="carousel"> 7 <!-- ol标签是图片轮播的控制点 --> 8 <ol class="carousel-indicators"> 9 <!-- 10 每一个li就是一个单独的控制点 11 data-target属性就是指定当前控制点控制的是哪一个轮播图，其目的是如果界面上有多个轮播图，便于区分到底控制哪一个 12 data-slide-to属性是指当前的li元素绑定的是第几个轮播项 13 注意，默认必须给其中某个li加上active，展示的时候就是焦点项目 14 --> 15 <li data-target="#轮播图的ID" data-slide-to="0" class="active"></li> 16 <li data-target="#轮播图的ID" data-slide-to="1"></li> 17 <!-- ...更多的 --> 18 </ol> 19 <!-- 20 .carousel-inner是所有轮播项的容器盒子， 21 注意role="listbox"代表当前div是一个列表盒子，作用就是给当前div添加一个语义 22 --> 23 <div class="carousel-inner" role="listbox"> 24 <!-- 每一个.item就是单个轮播项目，注意默认要给第一个轮播项目加上active，表示为焦点 --> 25 <div class="item active"> 26 <!-- 轮播项目中展示的图片 --> 27  28 <div class="carousel-caption"> 29 <!-- 标题或说明性文字，如果不需要，直接删除当前div.carousel-caption --> 30 </div> 31 </div> 32 <div class="item"> 33 <!-- ... --> 34 </div> 35 <!-- ... --> 36 </div> 37 <!-- 图片轮播上左右两个控制按钮，分别点击可以滚动到上一张和下一张 --> 38 <!-- 此处需要注意的是 该a链接的href属性必须指向需要控制的轮播图ID --> 39 <!-- 另外a链接中的data-slide="prev"代表点击该链接会滚到上一张，如果设置为next的话则相反 --> 40 <a class="left carousel-control" href="#轮播图的ID" role="button" data-slide="prev"> 41 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 42 <span class="sr-only">上一张</span> 43 </a> 44 <a class="right carousel-control" href="#轮播图的ID" role="button" data-slide="next"> 45 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 46 <span class="sr-only">下一张</span> 47 </a> 48 </div>
