流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。
流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下：
目标元素宽度 / 父盒子宽度 = 百分数宽度
下面通过一个案例来演示固定布局如何转换为百分比布局，如示例1所示。
【示例1】 固定布局转换为百分比布局
打开Chrome浏览器访问示例代码，页面效果如图1所示。
图1 运行效果
可以尝试改变浏览器窗口的大小，页面元素的大小不会随浏览器窗口改变，
如图2所示。
图2 缩小浏览器窗口
下面修改示例样式代码，将所有宽度修改为百分比的形式，具体如下：
刷新页面，缩小浏览器，页面按百分比随浏览器逐渐缩小，显示完整，页面效果如图3所示。
图3 按百分比布局效果
手机屏幕多种多样，由于不同手机分辨率、屏幕宽高比都有可能不同，同一张图片在不同手机中显示的位置和大小，在视觉上存在差异，我们需要对不同的手机屏幕进行适配，使相同的程序逻辑在不同的屏幕上显示的视觉效果一致，为此出现了视口的概念。
视口（Viewport） 是移动前端开发中一个非常重要的概念，最早是苹果公司推出iPhone时发明的，为的是让iPhone的小屏幕尽可能完整显示整个网页。不管网页原始的分辨率尺寸多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。在苹果引入视口的概念后，所有的移动开发者也都认同了这个做法。
为了方便读者理解视口到底是什么，下面举例进行说明。在网页制作过程中，有时人们会使用百分比来声明宽度，代码如下：
在上述代码中，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可以看出，网页的内容显示模糊，这时读者也许想到了是否可以把网页放大，通过移动网页来看清上面的内容，这就需要让视口的宽度大于浏览器窗口的宽度，来达到网页缩放的目的，下面将为读者详细讲解视口的设置方式。
来达到网页缩放的目的，下面将为读者详细讲解视口的设置方式。
在移动端浏览器当中，存在着3种视口：可见视口、布局视口（视窗视口）和理想视口。
1.可见视口与布局视口
可见视口是指设备的屏幕宽度（浏览器窗口宽度），布局视口是指网页的宽度，如图5所示。
图5 视口
在图5中，设备屏幕是414像素的宽度，在浏览器中，414像素的屏幕宽度能够展示1200像素宽度的内容。那么414像素就是可见视口的宽度，而1200像素就是布局视口的宽度。
一般移动设备的浏览器都默认设置了一个标签，用来定义虚拟的布局视口，用于解决早期的页面在手机上显示的问题。iOS 和Android基本都将这个视口分辨率设置为980像素，iPad和WinPhone设置为1024像素，所以PC端的网页在这些设备上呈现时，元素看上去很小，一般默认可以通过手动缩放网页。
为了让用户能够看清晰设备中的内容，开发者在通常情况下并不使用默认的viewport来展示，而是自定义配置视口的属性，使视口和页面的比例更加适当。
HTML5中，viewport 元标签是指标签， 标签中用于设置视口的常用属性如表1所示。
表1 视口相关属性
属性取值描述Width＜/td>正整数 或 device-Width＜/td>定义视口的宽度，单位为像素Height＜/td>正整数 或 device-Height＜/td>定义视口的高度，单位为像素，一般不用initial-scale[0.0-10.0]定义初始缩放值minimum-scale[0.0-10.0]定义缩小最小比例，它必须小于或等于maximum-scale设置maximum-scale[0.0-10.0]定义放大最大比例，它必须大于或等于minimum-scale设置user-scalableyes/no定义是否允许用户手动缩放页面，默认值yes
使用标签配置视口属性的方式如下：
在上述代码中，user-scalable用于设置用户是否可以缩放，默认为yes；width用于设置视窗视口的宽度，device-width表示布局视口和可见视口宽度相同，该属性也可以设置成具体宽度; initial-scale 用于设置初始缩放比例，取值为; maximum-scale用于设置最大缩放比例，取值为。除此之外，还可以通过height属性设置布局视口的高度，minimum-scale 设置最小缩放比例。
2.理想视口
默认情况下，移动设备浏览器的布局宽度为768——1 024像素。这对于宽度较大的网页来说并不理想。换句话说，布局视口的默认宽度并不是一个理想的宽度，这时引进了理想视口的概念。
需要注意的是，只有专为移动端设计的网站才会使用理想视口。理想视口的设置方式如下：
在上述代码中，设置content="width= device-width"代表通知浏览器，布局视口的宽度应该与理想视口宽度一致。说明定义理想视口是浏览器的工作，而不是设备或操作系统的工作。因此，同一设备上的不同浏览器拥有不同的理想视口。浏览器的理想视口的大小也取决于它所处的设备。
前端开发中很多事件在PC端和浏览器端是可共用的，但有些事件是针对移动端的，并且只在移动端产生，如触摸相关的事件。本节将为读者介绍移动端常用的一些事件，以及利用这些事件能够完成的一些效果。
移动端常用事件中最典型的就是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所示。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery