前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第122天:移动端开发常见事件和流式布局

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

作者头像
半指温柔乐
发布2018-09-11 10:23:56
3.6K0
发布2018-09-11 10:23:56
举报
文章被收录于专栏:前端知识分享

一、流式布局

1、 什么是流式布局

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

在这里我们以京东的M站为例进行说明:

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

2、 viewport

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

代码语言:javascript
复制
  • width:设置的是viewport宽度,可以设置device-width特殊值。
  • initial-scale:初始缩放比,大于0的数字,一般设置为1.0。
  • maximum-scale:最大缩放比,大于0的数字。
  • minimum-scale:最小缩放比,大于0的数字。
  • user-scalable:用户是否可以缩放,yes或no(1或0)。
代码语言:javascript
复制
<!--视口标签通可以使用 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类:用于定义一个固定宽度且居中的版心。
代码语言:javascript
复制
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屏蔽掉这个边距。
代码语言:javascript
复制
<div class="container">
  <div class="row"></div>
</div>

col-xx-x类:

  • 第一个连接符后边写屏幕尺寸,有xs超小屏幕 手机(<768px)、sm小屏幕 平板 (≥768px)、md中等屏幕 桌面显示器(≥992px)、lg大屏幕 大桌面显示器 (≥1200px)四种。
  • 第二个连接符后边表示对应的份数,占12份中的几份
代码语言:javascript
复制
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类:设置在不同的屏幕下隐藏。

代码语言:javascript
复制
<div class="hidden-xs,hidden-sm,hidden-md,hidden-lg">

</div>

text-xx类:设置文字的对齐方式。

代码语言:javascript
复制
text-center   文本居中
text-left         文本左对齐
text-right    文本右对齐

pull-xx类:设置浮动。

代码语言:javascript
复制
pull-left         左浮动类
pull-right    右浮动类
  • center-block类:让一个固定宽度的元素居中。
3、字体图标
  • 字体图标:
代码语言:javascript
复制
@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');
}
代码语言:javascript
复制
字体文件格式:

eot:embedded-opentype
svg:svg
ttf:truetype
woff:woff
4、轮播图插件 Carousel
  • 基本的轮播图实现:
代码语言:javascript
复制
 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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-12-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、流式布局
    • 1、 什么是流式布局
      • 2、 viewport
        • 1、touch事件
        • 2、event事件
        • 1、什么是响应式开发
        • 2、响应式开发的前景
        • 3、 响应式开发的原理
        • 1、Bootstrap简介
        • 2、Bootstrap常用样式
        • 3、字体图标
        • 4、轮播图插件 Carousel
    • 二 、 移动端常见事件
    • 三、响应式开发
    • 四、Bootstrap框架
    相关产品与服务
    容器服务
    腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档