第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:当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用eventpreventDefault()可以阻止默认情况的发生:阻止页面滚动
  • 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 OttoJacob Thornton合作开发,是一个CSS/HTML框架。它提供了优雅的HTMLCSS规范,它即是由动态CSS语言Less写成。
  • Bootstrap是基于HTML5CSS3开发的,它在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的类名控制每一列的占比。

  1. 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
  • 基本的轮播图实现:
 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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏糊一笑

移动端效果之CellSwiper

写在前面 接着之前的移动端效果讲解,刚好项目中需要使用到这一效果,去饿了么的组件库看了一下效果,发现效果和微信端的cellSwiper还是有点差别的,由于项目中...

25960
来自专栏武军超python专栏

2018年9月3日初识HTML超文本标记语言

javascript原名livescript,简称(js),因为当时公司和sun公司合作,为了营销考虑,让它看起来更像当时 特别火热的java,所以更名为ja...

18810
来自专栏coding

初识vue动画效果

关于vue.js的动画效果,在其文档中有很详细的说明,利用官方提供的api, 可以实现极为丰富酷炫的效果。惟一限制你的,是你的想象力!

13910
来自专栏章鱼的慢慢技术路

PhotoshopCS6常用快捷键速查

24040
来自专栏HTML5学堂

如何让旧浏览器支持HTML5新标签

HTML5学堂:开发永远和理论不相同,一旦考虑IE低端浏览器,所有的HTML5新增功能都成了浮云~~~从HTML5新增标签的语义角度来说,是有利于网站SEO的,...

34370
来自专栏互联网杂技

移动端开发的一些技巧

开篇语 最近接手了一个移动端的项目。个人感觉是自己做得比较快而且比较健壮的一个。。。移动端最主要就是页面要适用不同的手机屏幕,ipad等。下面就分享一些技巧,让...

331100
来自专栏HTML5学堂

SVG - 创建SVG图片

SVG - 创建SVG图片 HTML5学堂:之前在绘图中使用到了SVG以及Canvas,因此决定最近将绘图类的知识和大家分享一下。从研究角度来说,SVG比Can...

50580
来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

40970
来自专栏Youngxj

如何做一张属于自己的自适应网页

29240
来自专栏前端杂货铺

样式化加载失败的图片

本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动,望读者见谅 加载失败的图片是比较丑陋的,比如 但是我...

38570

扫码关注云+社区

领取腾讯云代金券