WebApp移动端开发01——页面布局

WebApp移动端开发01

开发移动端应用我们需要学习的知识点可以分成如下几个：

1. 移动端布局适配
2. 移动端事件
3. 移动端交互效果
4. 移动端前端框架
5. 移动端调试

移动端布局适配

从屏幕尺寸、屏幕类型等方面来看的话，人都设备和PC设备大有不同， 所以从布局、适配等方面都需要我们考虑到

Viewpory视口的作用（在移动端浏览器上用来显示网页的那一块区域）

网页不是直接放入浏览器中的，而是先放到viewport中，然后viewport再等比例缩放到浏览器的宽度，放入浏览器，viewport在缩放过程中，网页内容也就被缩小了
网页访问到的clicentWidth其实是viewport的宽度

这样的话我们需要做一些处理，其实问题的根源在于viewport的宽度和浏览器宽度不一样，如果我们能直接将其设置为一样的话，不会出现这样的问题了
我们通过meta标签来设置viewport将其设置为浏览器的宽度，也就是设备的宽度，这样的话布局就会简单很多了

viewport的宽度

当浏览器宽度小于980的时候，宽度就是980，当浏览器尺寸宽度大于980的时候，宽度和浏览器宽度一致

通过meta标签来设置viewport

标签提供关于HTML文档的元数据，它不会显示在页面上，但是对于机器是可读的，可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键字）或其他web服务

meta标签大全

< meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>

meta viewport 的6个属性：

width	值
initial-scale	设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
minimum-scale	设置页面的初始缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
height	设置layout viewport 的高度，这个属性并不重要，很少使用
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

移动端布局方式与设计图

现有的布局方式：

1. 固定布局：每个元素都是固定尺寸，内容区域居中在浏览器中间
   内容区域的尺寸：980,1000,1100,1200
2. 响应式布局：利用媒体查询来实现不同尺寸的浏览器显示结构不一样 @media 根据浏览器分辨率大小进行适配
   一般会有三张设计图，pc，平板，手机
3. 自适应布局：属于响应式里的一种，利用rem、百分比、vwvh等布局单位来实现
   设计图一般只有一张 640、750居多

移动端布局

移动的屏幕和PC的屏幕有一个很大的区别移动端是视网膜高清屏（Retina）
retina屏幕有一个属性叫DPR（设备像素缩放比） = 物理像素 / 逻辑像素
例如，iPhone5手机的宣传尺寸是640宽，这个值就是物理像素，而在我们开发者眼里我们所值的其实是320px（逻辑像素）

在dpr为2的手机中，我们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染
如果不管dpr的话，其实我们的布局依然可以，以为我们设置一个像素宽高的话，在手机上看见的基本上也就是这么大，至于手机设备用多少个物理像素去渲染，大小还是不会发生变化的
设计师出图都是2倍的，是因为在页面中除了字体（矢量图）大部分都是位图，也就是如果一个像素宽高的盒子里准备放入图片，如果图片也是一像素宽高，其实在移动端渲染的时候是用四个像素来渲染，图片会失真，但是如果我们给一像素宽高的盒子放入2像素宽高的图片，就不会失真

布局单位

因为我们的移动端设备有很多，所以我们的布局不能是固定的，我们要使用自适应布局

1. 百分比 %

   优点：简单，无需设置，兼容性好
   缺点：基于父元素的属性来设置，如果父元素没有宽高，设置无效

2. vwvh

   一个vw等于viewport宽度的百分之一，一个vh等于viewport高度的百分之一
   vmax等于vw和vh中较大的那个，vmin等于vw和vh中较小的那个
   优点：简单，无需设置
   缺点：兼容性不好

3. rem

   一个rem等于根元素（html）的字体大小，兼容性很好
   优点：兼容好，使用简单
   缺点：需要设置

rem与适配

当我们想使用一个自适应单位的时候，发现%有缺陷，vwvh兼容性差，弹性盒所针对的是元素排列的问题，只能适用于某种情况，所以我们就想到了rem
rem的兼容性好一点，它也确实是一个布局单位，不受父子元素的影响，设置了rem之后，也不会对px、em等单位造成影响，他是一个理想的单位
rem也有一个致命的问题，就是它不是一个自适应的单位，不会跟着设备尺寸不同而不同，但是没有关系，我们有万能的js，可以去动态的设置它

方法1：

我们可以将1rem设置成屏幕的某一个比例，比如将1rem设置成屏幕的十分之一
假设我们的设计图是640px的，我们拿到之后量了一下a的宽度为480px，得到比例a所占屏幕3/4，根据rem与屏幕的关系，最后设置成7.5rem
就是说在设置元素宽度的时候，会根据设定好的比例去进行换算

<script>
	document.documentElement.style.fontSize =
	 document.dodumentElement.clientWidth/10 + "px"
</script>

方法2：

如果设计图是640的图，这个时候我们知道它是照着iPhone5来的，假设有一个在640的涂上我们量的宽度是320，因为是2倍图，所以我们知道它的实际宽度是160px，这样的话，我们直接给这个设置设置width：160px就可以了

假如我们不用px来设置，用rem来设置，例如，我们可以将rem设置为100px，这样的话，刚才的盒子设置为width：1.6rem，算法就是，量的宽度/（dpr*100）=要设置的rem值

这样我们就可以开心的开发，量一个尺寸，除个2，再小数点推2位，设置就行了，但是我们也知道，手机的尺寸并不可能都是320，这样的话，没有关系，我们可以根据一个比例来算rem到底设置为多少

在手机宽度为320的时候，我们设置的1rem为100px，所以有一个比例b = 100/320

那么在w宽度的手机上，1rem应该是多少呢？设为x 那么x / w = b
得到x = w / 3.2
那么就不要写死html的fontSize为100了，而是用js去设置：

document.documentElement.style.fontSize = 
 document.documentElement.clientWidth / 3.2 + "px"

这样我们就可以得到一个自适应的rem