移动端布局以及相关单位

之前做了很多移动端布局，今天为大家总结一些经验。

一. viewport

如今可以绝大部分浏览器里（即主流的安卓浏览器和ios），都支持对viewport的一个控制了。一般的，我们会这么写。

viewport默认有6个属性

设置viewport的宽度（即之前所提及到的，浏览器的宽度详），这里可以为一个整数，又或者是字符串"width-device"
initial-scale: 页面初始的缩放值，为数字，可以是小数
minimum-scale: 允许用户的最小缩放值，为数字，可以是小数
maximum-scale: 允许用户的最大缩放值，为数字，可以是小数
height: 设置viewport的高度（我们一般而言并不能用到）
user-scalable: 是否允许用户进行缩放，'no'为不允许，'yes'为允许

如：<meta name="viewport" content="width=device-width,user-scalable=no，initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5">

二. 关于我们的设备

需要了解的以下三个概念:
- PPI:Pixels Per Inch缩写,表示的是每英寸所拥有的像素数目
- DPR: 默认缩放为100%的情况下，设备物理像素和CSS像素(逻辑像素)的比值，即物理像素/逻辑像素
- Resolution: 就是我们常说的分辨率
物理像素与逻辑像素

看了我们上面内容，或许有些人会有些疑问，我的安卓手机，或者iphone6plus(目前应该仅限于这一款机型吧)，买回来的是1920x1080的或者其他更高的，比我之前所谓的那个viewport默认的980px要大。

这样的问题，也就是我之前所说的物理像素与逻辑像素的关系了（即DPR）。以1920x1080为例，1080为物理像素，而我们在viewport中，获取到的，比如"width-device"，是逻辑像素。所以之前viewport的默认值，所比对的大小，其实是逻辑像素的大小，而非物理像素的大小。

以iphone6为例，在不做任何缩放的条件下，iphone6的获取到的'width-device'为375px,为屏幕的逻辑像素。而购买时我们所知的750px，则为屏幕的物理像素。
CSS的问题

有了上面第二点的一些基础，还是以iphone6为例，我们可以知道，其实我们所写的1px，在iphone6上为2px的物理像素。所以，最后的，给出一个结论。就是我们写的1px，在移动端，是逻辑像素的1px，而非物理像素的1px。

三. 使用rem布局

这里先了解一下常用的一些单位：

px: 绝对单位，固定值

%:相对单位在宽度计算上还是不错的，但是高度上就比较麻烦

em:相对单位根据自身或者父级字体大小进行计算

rem:相对单位 r = root -> html 依赖简单，只受html的字体大小的影响。

到这里就是我们的重点，rem是相对根元素，所以我们可以根据屏幕宽度来设置根元素html 的字体大小，从而使用rem 单位进行布局：

动态获取屏幕宽度设置字体大小的代码：

console.log(window.document.documentElement.clientWidth);

var initWidth = window.document.documentElement.clientWidth;
document.getElementsByTagName('html')[0].style.fontSize = initWidth / 10 + 'px';
</script>

然后，我们就可以在页面布局中使用rem 为单位，实现动态布局，以适应屏幕尺寸。

最后，再给大家一个案例。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var initScale = 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,user-scalable=no，initial-scale=' + initScale +
',minimum-scale=' + initScale + ',maximum-scale=' + initScale + '">')

var initWidth = window.document.documentElement.clientWidth;
document.getElementsByTagName('html')[0].style.fontSize = initWidth / 10 + 'px';
</script>
<style>
html {
height: 100%;
overflow: hidden;
}

body {
height: 100%;
margin: 0;
overflow: auto;
}

header,
footer {
position: absolute;
 100%;
height: 1.5625rem;
background: orange;
}

header {
top: 0;
left: 0;
}

footer {
bottom: 0;
left: 0;
}

.content {
overflow: hidden;
margin: 1.5625rem 0;
}

div {
 4.6875rem;
height: 4.6875rem;
margin: 0.15625rem;
background: plum;
float: left;
}

a {
-webkit-tap-highlight-color: transparent;
}

input {
-webkit-appearance: none;
}
</style>
<!--
目标（测量）元素 / rem大小 = 实际rem的值
在符合设计图和设备尺寸时：
1rem = 64px

position: fixed; 在部分老系统或低版本浏览器中不支持
position: absolute; 兼容非常ok，但是滑动非常卡,需通过js配合
-->
</head>

<body>
<header></header>
<section class="content">
<a href="http://www.cnblogs.com/leeyen/">leeyen</a>
<input type="button" value="btn">
<hr>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<footer></footer>
</body>

</html>

都是个人经验总结，如有问题，及时反馈，谢谢大家支持

要每天多努力一些，比别人多努力一个小时。