第122天：移动端开发常见事件和流式布局

最新推荐文章于 2026-07-03 22:24:25 发布

原创最新推荐文章于 2026-07-03 22:24:25 发布 · 222 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

移动端

一，流式布局

1，什么是流式布局

式流就是布局百分比布局，盒子通过的宽度设置分类中翻译百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充，会同时设定最小宽度状语从句：最大宽度，适用于图片比较的多首页，门户，商电等。

在这里我们以京东的中号站为例进行说明：

可以看到，在京东各个模块的主容器中，都设置了最大最小宽度和宽度为100％，而在导航区块中，由于一行有5个小区块，所以设置了宽度为20％，使得小区块也能达到自适应的效果。

2，视口

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

width：设置的是viewport宽度，可以设置device-width特殊值。
initial-scale：初始缩放比，大于0的数字，一般设置为1.0。
maximum-scale：最大缩放比，大于0的数字。
minimum-scale：最小缩放比，大于0的数字。
user-scalable：用户是否可以缩放，是或否（1或0）。

<!--视口标签通可以使用 meta:vp + tab 来快速生成，通常我们可以设置为下边这样。-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>

二，移动端常见事件

1，触摸事件

touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指。
touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动。
touchend：当手指离开屏幕时触发。
touchcancel：系统- 停止跟踪触。时候摸会触发例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用。

触摸事件的响应顺序：

ontouchstart - > ontouchmove - > ontouchend - > onclick（300ms延时）。

2，事件事件

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以上。

四，引导框架

1，引导简介

官方网站
引导中文网
的英文它由Twitter的设计师Mark Otto状语从句：Jacob Thornton合作开发，一个的英文CSS/HTML框架。提供它优雅了的HTML状语从句：CSS规范，即它的英文由动态CSS语言Less写成。
Bootstrap基于的英文HTML5状语从句：CSS3开发的，在它jQuery的基础上进行了更为个性化人性状语从句：化的完善，形成一套自己独有的网站风格，并大部分兼容jQuery插件。
Bootstrap中所有游戏了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮，功能完备的网站其中包括以下组件：下拉菜单，按钮组，按钮下拉菜单，导航，导航条，路径导航，分页，排版，缩略图，警告对话框，进度条，媒体对象等。

2，自举常用样式

容器类：用于定义一个固定宽度且居中的版心。

1 <div class="topbar">
2   <div class="container">
3     <!--
4       此处的代码会显示在一个固定宽度且居中的容器中
5       该容器的宽度会跟随屏幕的变化而变化
6     -->
7   </div>
8 </div>

栅格系统：Bootstrap中定义了一套响应式的网格，其使用方式就是将一个容器划分成12列，通过然后col-xx-xx的类名控制每一列的占比。

排类：
- 因为每一个列默认有一个15像素的左右外边距。
- 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>

隐藏类：设置在不同的屏幕下隐藏。

<div class="hidden-xs,hidden-sm,hidden-md,hidden-lg">

</div>

文本-XX类：设置文字的对齐方式。

text-center   文本居中
text-left         文本左对齐
text-right    文本右对齐

拉XX类：设置浮动。

pull-left         左浮动类
pull-right    右浮动类

中心块类：让一个固定宽度的元素居中。

3，字体图标

字体图标：

@font-face {
  font-family: 'XXX';
  src: url(https://blog.csdn.net/'../font/MiFie-Web-Font.eot') format('embedded-opentype'), 
  url(https://blog.csdn.net/'../font/MiFie-Web-Font.svg') format('svg'), 
  url(https://blog.csdn.net/'../font/MiFie-Web-Font.ttf') format('truetype'), 
  url(https://blog.csdn.net/'../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       ![](example.jpg)
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>