流式布局
在PC端进行网页制作时，经常使用固定像素并且内容居中的网页布局，为了适应小屏幕的设备，在移动设备和跨平台(响应式)网页开发过程中，多数使用流式布局，本节将对流式布局进行详细介绍。
流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。
流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下：
目标元素宽度 / 父盒子宽度 = 百分数宽度
下面通过一个案例来演示固定布局如何转换为百分比布局，如示例1所示。
【示例1】 固定布局转换为百分比布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>固定布局转换为百分比布局</title>
<style type="text/css">
body>*{ width:980px; height:auto; margin:0 auto; margin-top:10px;
border:1px solid #000; padding:5px;}
header{ height:50px;}
section{ height:300px;}
footer{ height:30px;}
section>*{ height:100%; border:1px solid #000; float:left;}
aside{ width:250px;}
article{ width:700px; margin-left:10px;}
</style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
<aside>aside</aside>
<article>article</article>
</section>
<footer>footer</footer>
</body>
</html>
打开Chrome浏览器访问示例代码，页面效果如图1所示。
图1 运行效果
可以尝试改变浏览器窗口的大小，页面元素的大小不会随浏览器窗口改变，
如图2所示。
图2 缩小浏览器窗口
下面修改示例样式代码，将所有宽度修改为百分比的形式，具体如下：
<style type="text/css">
body>*{ width:98%; height:auto; margin:0 auto; margin-top:10px;
border:1px solid #000; padding:5px;}
header{ height:50px;}
section{ height:300px;}
footer{ height:30px;}
section>*{ height:100%; border:1px solid #000; float:left;}
aside{ width:25.510204%;/*250÷980*/}
article{ width:71.428571%; /*700÷980*/margin-left:1.020408%;}
</style>
刷新页面，缩小浏览器，页面按百分比随浏览器逐渐缩小，显示完整，页面效果如图3所示。
图3 按百分比布局效果
视口
手机屏幕多种多样，由于不同手机分辨率、屏幕宽高比都有可能不同，同一张图片在不同手机中显示的位置和大小，在视觉上存在差异，我们需要对不同的手机屏幕进行适配，使相同的程序逻辑在不同的屏幕上显示的视觉效果一致，为此出现了视口的概念。
1、理解视口
视口(Viewport) 是移动前端开发中一个非常重要的概念，最早是苹果公司推出iPhone时发明的，为的是让iPhone的小屏幕尽可能完整显示整个网页。不管网页原始的分辨率尺寸多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。在苹果引入视口的概念后，所有的移动开发者也都认同了这个做法。
为了方便读者理解视口到底是什么，下面举例进行说明。在网页制作过程中，有时人们会使用百分比来声明宽度，代码如下:
< !DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div style="width: 50%"></div>
</body>
</html>
在上述代码中，div 是body的子元素，设置style="width: 50%"就表示该div占body宽度的50%，而body没有显示声明宽度，因此body占用了父包含块(视口) html 元素宽度的100%。同样，html 也没显示声明宽度，因此html元素也占父包含块的100%。
视口在CSS标准文档中称为初始包含块，这个初始包含块是所有CSS百分比宽度推算的根源。在PC桌面上，如果不对html和body元素设置margin和padding，那么html和body元素都与浏览器窗口的宽度一致。 因此，这时，上述代码中的div元素占浏览器宽度的50%。但是，由于移动设备的屏幕较小，在移动设备上，如果视口的宽度与浏览器窗口的宽度一致，在小的屏幕上呈现过多的内容清晰度较差，例如示例1的页面内容如果在iPhone6设备上呈现，效果如图4所示。
图4 示例1 在iPhone6设备的效果
从图4可以看出，网页的内容显示模糊，这时读者也许想到了是否可以把网页放大，通过移动网页来看清上面的内容，这就需要让视口的宽度大于浏览器窗口的宽度，来达到网页缩放的目的，下面将为读者详细讲解视口的设置方式。
来达到网页缩放的目的，下面将为读者详细讲解视口的设置方式。
2、移动端的3种视口
在移动端浏览器当中，存在着3种视口：可见视口、布局视口(视窗视口)和理想视口。
1.可见视口与布局视口
可见视口是指设备的屏幕宽度(浏览器窗口宽度)，布局视口是指网页的宽度，如图5所示。
图5 视口
在图5中，设备屏幕是414像素的宽度，在浏览器中，414像素的屏幕宽度能够展示1200像素宽度的内容。那么414像素就是可见视口的宽度，而1200像素就是布局视口的宽度。
一般移动设备的浏览器都默认设置了一个<meta>标签，用来定义虚拟的布局视口，用于解决早期的页面在手机上显示的问题。iOS 和Android基本都将这个视口分辨率设置为980像素，iPad和WinPhone设置为1024像素，所以PC端的网页在这些设备上呈现时，元素看上去很小，一般默认可以通过手动缩放网页。
为了让用户能够看清晰设备中的内容，开发者在通常情况下并不使用默认的viewport来展示，而是自定义配置视口的属性，使视口和页面的比例更加适当。
HTML5中，viewport 元标签是指<meta>标签，<meta> 标签中用于设置视口的常用属性如表1所示。
表1 视口相关属性
| 属性 | 取值 | 描述 |
|---|---|---|
| width | 正整数 或 device-width | 定义视口的宽度，单位为像素 |
| height | 正整数 或 device-height | 定义视口的高度，单位为像素，一般不用 |
| initial-scale | [0.0-10.0] | 定义初始缩放值 |
| minimum-scale | [0.0-10.0] | 定义缩小最小比例，它必须小于或等于maximum-scale设置 |
| maximum-scale | [0.0-10.0] | 定义放大最大比例，它必须大于或等于minimum-scale设置 |
| user-scalable | yes/no | 定义是否允许用户手动缩放页面，默认值yes |
使用<meta>标签配置视口属性的方式如下:
<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0">
在上述代码中，user-scalable用于设置用户是否可以缩放，默认为yes；width用于设置视窗视口的宽度，device-width表示布局视口和可见视口宽度相同，该属性也可以设置成具体宽度; initial-scale 用于设置初始缩放比例，取值为0~10.0; maximum-scale用于设置最大缩放比例，取值为0~10.0。除此之外，还可以通过height属性设置布局视口的高度，minimum-scale 设置最小缩放比例。
2.理想视口
默认情况下，移动设备浏览器的布局宽度为768~1 024像素。这对于宽度较大的网页来说并不理想。换句话说，布局视口的默认宽度并不是一个理想的宽度，这时引进了理想视口的概念。
需要注意的是，只有专为移动端设计的网站才会使用理想视口。理想视口的设置方式如下：
<meta name= "viewport" content="width=device-width">
在上述代码中，设置content="width= device-width"代表通知浏览器，布局视口的宽度应该与理想视口宽度一致。说明定义理想视口是浏览器的工作，而不是设备或操作系统的工作。因此，同一设备上的不同浏览器拥有不同的理想视口。浏览器的理想视口的大小也取决于它所处的设备。
移动端常用事件
前端开发中很多事件在PC端和浏览器端是可共用的，但有些事件是针对移动端的，并且只在移动端产生，如触摸相关的事件。本节将为读者介绍移动端常用的一些事件，以及利用这些事件能够完成的一些效果。
1、Touch 事件简介
移动端常用事件中最典型的就是Touch事件，Touch中文译为“接触、触摸”，Touch事件是许多用于触屏操作事件的总称。
习惯在计算机上写JavaScript代码的读者可能想问一个问题：为什么移动端要使用Touch事件? mouse 事件和click事件在手机上能不能触发?
首先，这两类事件在移动端也可以触发，但分别有一些问题，移动端会多点触屏，不适合mouse，而click事件在手机上有300ms延迟(正常现象，不是bug)。因此，在移动端绑定事件，最好使用专]为移动端设计的Touch事件。
Touch事件的产生是由于iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页时，PC端的鼠标和键盘事件是不够用的，在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(Touch) 操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。
HTML5中为移动端新添加了很多事件，但是由于它们的兼容问题不是很理想，应用实践性不强，所以，在这里只介绍目前几乎被所有移动浏览器支持的4种最基本的Touch事件，如表2所示。
表2 4种最基本的触摸事件
| 事件 | 描述 |
|---|---|
| touchstart | 手指触摸屏幕时触发 |
| touchmove | 手指在屏幕上滑动时触发 |
| touchend | 手指离开屏幕时触发 |
| touchcancel | 系统取消touch事件的时候触发 |
表2中的触摸事件与PC端的onclick等事件不同，需要通过以下方法进行绑定，具体如下:
dom.addEventListener('事件名称', function(e) {}) ;
使用触摸移动设备时，有时会出现多个手指同时触摸屏幕的情况，称为多点触摸，如图6所示。
图6 多点触摸
当多点触摸触发Touch事件时，将会返回Touch对象的触摸点集合，在绑定事件的语法中，回调函数返回的e(TouchEvent)对象中包含了3个用于跟踪触摸的属性，用于返回不同的触摸点集合，如表3所示。
表3 TouchEvent 对象的属性
| 属性 | 描述 |
|---|---|
| touches | 表示当前跟踪的触摸操作的Touch对象的触摸点集合 |
| targetTouches | 特定于事件目标的Touch对象的触摸点集合 |
| changedTouches | 表示自上次触摸以来发生了什么改变的Touch对象的触摸点集合 |
触摸点集合中每个Touch对象都包含一些用于获取触摸信息的常用属性，如表4所示。
表4 Touch 对象的常用属性
| 属性 | 描述 |
|---|---|
| clientX | 触摸目标在视口中的x坐标 |
| clientY | 触摸目标在视口中的y坐标 |
| identifier | 标识触摸的唯一ID |
| pageX | 触摸目标在页面中的x坐标 |
| pageY | 触摸目标在页面中的y坐标 |
| screenX | 触摸目标在屏幕中的x坐标 |
| screenY | 触摸目标在屏幕中的y坐标 |
| target | 触摸的DOM节点目标 |
虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的，例如DOM属性中也可以获取clientX和clientY，这里进行了解即可。
2、Touch 事件的应用
对Touch事件有了基本了解后，下面通过一个案例来演示Touch事件的用法，如示例2所示。
【示例2】 Touch 事件的应用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--视口viewport 只有移动端才识别-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
<title>Touch事件</title>
<style>
body{
margin: 0;
padding: 0;
}
a{
height: 100px;
width: 100%;
display: block;
/*去除 */
-webkit-tap-highlight-color: red;
border: 10px solid black;
box-sizing: border-box;
}
</style>
</head>
<body>
<a href="#"></a>
<script>
var a = document.querySelector('a');
/*触摸开始事件*/
a.addEventListener('touchstart',function(e){
console.log('touchstart');
console.log(e.changedTouches);
console.log(e.targetTouches);
console.log(e.touches);
});
/*触摸滑动事件*/
a.addEventListener('touchmove',function(e){
console.log('touchmove');
console.log(e.changedTouches);
console.log(e.targetTouches);
console.log(e.touches);
});
/*触摸结束事件*/
a.addEventListener('touchend',function(e){
console.log('touchend');
console.log(e.changedTouches);
console.log(e.targetTouches);
console.log(e.touches);
});
</script>
</body>
</html>
在上述代码中，第6.7行用于设置移动端设备的视口；在第26行定义了一个<a>标签，并且在第14~22行为<a>标签定义了样式，运行代码后会在页面中显示一个黑色边框的区域，当在移动端触摸<a>标签的黑色边框区域时，会触发touchstart 和touchend事件，当滑动触摸该区域时将触发touchmove事件；第27~50行使用JavaScript代码获取<a>标签，并且为<a>标签绑定了touchstart、 touchmove 和touchend事件，在事件触发时，将3个事件对应的触摸点集合changedTouches. targetTouches 和touches输出到控制台。
打开Chrome浏览器，访问示例，页面效果如图7所示。
图7 页面效果
按[F12]键，打开Chrome的开发者工具，如图8所示。
图8 开发者工具
单击“ ”按钮，进入移动设备调试模式，如图9所示。
图9 移动设备调试模式
在图9中，将Device (设备)选择为Apple iPhone 6/7/8，并且打开Console窗口，这时单击黑色边框区域内，代表触摸页面上的<a>标签区域，触发Touch事件，观察Console窗口输出结果，如图10所示。
图10 touchstart 和touchend
从图10的输出结果可以看出,单击黑色边框区域触发了touchstart和touchend事件，每个事件下的3个TouchList代表输出的changedTouches、targetTouches 和touches集合。需要注意的是，touchend 事件返回的TouchEvent只会记录changedTouches。
刷新示例2，在黑色区域单击并滑动，然后松开鼠标，观察Console窗口输出结果，如图11所示。
图11 触发
从图11的输出结果可以看出，touchmove事件被触发，也就是说当触摸滑动时该事件才会被触发，需要注意的是，触发几次touchmove与滑动的位置改变有关。
打开第一个触摸点集合TouchList的Touch对象信息，可以看到触摸点的相关信息，如图12所示。
图12 触摸点信息
在图12中，“0: Touch”中的“0”表示第一个触摸点的索引值，如果同时有多个触摸点，就会出现“1: Touch”、“2: Touch”，依此类推。另外，可以通过“e. 触摸点集合.属性名称”的方式来获取触摸点的相关信息，例如“e.changedTouches.clientX”。
3、过渡和动画结束事件
在移动端，除Touch事件外，还会经常用到过渡结束(transitionend) 和动画结束(animationend)事件，下面分别介绍两个事件的用法。
1. transitionend 事件
transitionend事件在CSS完成过渡效果后触发，可以使用如下方式来绑定。
//标准语法
dom.addEventListener('transitionend', function(e){});
上述语法为绑定transitionend 事件的标准语法，目前各大浏览器对该事件的支持情况如表5所示。
表5 浏览器对transitionend事件支持情况
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 4.0+ | 12.1+ |
对于webkit内核的浏览器(如Safari)，需要使用如下代码进行绑定。
//Safari 3.1 到 6.0 代码
dom.addEventListener(' webkitTransitionEnd',function(e){});
在上述语法中，webkitTransitionEnd 中添加了webkit前缀。
下面通过一个案例来演示transitionend事件的具体用法，如示例3所示。
【示例3】 transitionend事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>transitionend事件</title>
<style>
/*为div设置宽高、背景色及过渡*/
#myDIV {
width: 100px;
height: 100px;
background: pink;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#myDIV:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p>将鼠标移动到div元素上，查看过渡效果。</p>
<div id="myDIV"></div>
<script>
// Safari 3.1 到 6.0 版本代码
var dom= document.getElementById("myDIV");
dom.addEventListener("webkitTransitionEnd", myFunction);
// 标准语法
dom.addEventListener("transitionend", myFunction);
// 事件回调函数
function myFunction() {
this.innerHTML='过渡效果结束';
this.style.background='green';
}
</script>
</body>
</html>
在上述语法中，完成了一个<div>逐渐放大变色的过渡效果，当过渡结束时触发transitionend事件，此时，<div> 标签上会出现文字“过渡效果结束”，并且背景颜色会变为green，具体细节如下：
第23行添加一个<div>标签，第8~18行为<div>标签设置了宽高、背景色及过渡，当鼠标移动到<div>上时，可以查看过渡的效果；第25~34行绑定了过渡事件transitionend事件。
打开Chrome浏览器，访问示例3面效果如图13所示。在图13中，将鼠标移动到方块区域，可查看过渡效果和过渡结束触发事件的效果，如图14和图15所示。
图13 页面效果
图14 过渡效果
图15 过渡结束
2. animationend事件
与transitionend事件相似，animationend 事件在CSS完成动画效果后触发，可以使用如下方式来绑定。
//标准语法
dom.addEventListener('animationend'', function(e){});
上述语法为绑定animationend事件的标准语法，同样对于webkit内核的浏览器(如Safari)，需要添加webkit前缀，使用如下代码进行绑定。
//Safari 3.1 到 6.0 代码
dom.addEventListener('webkitAnimationEnd',function(e){});
目前，各大浏览器对该事件的支持情况如表6所示。
表6 浏览器对 animationend事件支持情况
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 4.0+ | 12.1+ |
下面通过一个案例来演示animationend事件的具体用法，如示例4所示。
【示例4】 animationend事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animationend事件</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
/*设置div的样式和动画*/
.box {
width: 300px;
height: 100px;
margin: 50px auto;
background: brown;
position: relative;
-webkit-animation: move 4s 1;
animation:move 4s 1;
}
/*绑定动画效果*/
@keyframes move {
0% {
left: -300px;
}
100% {
left: 0px;
}
}
@-webkit-keyframes move {
0% {
left: -300px;
}
100% {
left: 0px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var dom = document.querySelector("div");
// Chrome, Safari 和 Opera
dom.addEventListener("webkitAnimationEnd", myFunction);
dom.addEventListener("animationend", myFunction);
// 事件回调函数
function myFunction() {
this.innerHTML = "动画结束";
this.style.backgroundColor = "pink";
}
</script>
</html>
在上述代码中，完成了一个<div>向右移动，并且变色的动画效果，动画结束时会在<div>上显示“动画结束”，<div> 演示变为pink，具体细节如下：第44行添加了<div>标签；第12-40行为<div>标签设置样式和动画效果；第47~55行首先获取div元素对象，然后为其绑定animationend事件，并在回调函数中设置动画结束时<div>标签中的文字为“动画结束”、背景色为pink。
打开Chrome浏览器，访问示例4，可以看到动画自动播放，如图16、图17所示。当动画结束时，触发结束事件animationend，页面效果如图18所示。
图16 运行效果
图17 动画自动播放
图18 动画结束
超全面的测试IT技术课程，0元立即加入学习！有需要的朋友戳：
腾讯课堂测试技术学习地址
欢迎转载，但未经作者同意请保留此段声明，并在文章页面明显位置给出原文链接。
扫一扫
5429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
