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

简介: 一、流式布局1、 什么是流式布局流式布局就是百分比布局,通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充,同时会设定最小宽度和最大宽度,适用于图片比较多的首页、门户、电商等。

一、流式布局

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

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>

 







相关文章
|
2月前
移动端的布局如何使用媒体查询
移动端的布局如何使用媒体查询
61 2
|
2月前
|
前端开发 JavaScript
uniapp移动端悬浮按钮(吸附边缘)
uniapp移动端悬浮按钮(吸附边缘)
193 0
|
2月前
|
编解码 小程序 前端开发
在小程序中实现自适应布局或响应式设计
在小程序中实现自适应布局或响应式设计
|
2月前
|
存储 前端开发 JavaScript
【亮剑】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果
【4月更文挑战第30天】在React中,处理`onScroll`事件可实现复杂功能如无限滚动和视差效果。类组件和函数组件都能使用`onScroll`,通过`componentDidMount`和`componentWillUnmount`或`useEffect`添加和移除事件监听器。性能优化需注意节流、防抖、虚拟滚动、避免同步计算和及时移除监听器。实战案例展示了如何用Intersection Observer和`onScroll`实现无限滚动列表,当最后一项进入视口时加载更多内容。合理利用滚动事件能提升用户体验,同时要注意性能优化。
|
7月前
移动端开发—流式布局
移动端开发—流式布局
|
12月前
|
前端开发 定位技术 容器
百度地图高级开发:上滑推拉菜单CSS解决方案
百度地图高级开发:上滑推拉菜单CSS解决方案
64 0
|
Web App开发 编解码 前端开发
【前端】【响应式设计】【移动端】响应式设计作业01:视口、二倍图
【前端】【响应式设计】【移动端】响应式设计作业01:视口、二倍图
265 0
|
Web App开发
移动端适配——视口概念
事实上这种方式是不利于我们进行移动的开发的,我们希望的是设置100px,那么显示的就是100px;
131 0
移动端适配——视口概念
|
前端开发 容器
移动端页面布局中的流动布局(百分比布局)和弹性布局
移动端页面布局中的流动布局(百分比布局)和弹性布局
移动端页面布局中的流动布局(百分比布局)和弹性布局

热门文章

最新文章