第122天：移动端开发常见事件和流式布局
一、流式布局
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：woff4、轮播图插件 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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-12-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
容器服务
腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。
腾讯云开发者
