HTML5布局的个人总结
- 布局的基本属性
- body和html根标签
- 盒子模型
- display属性解读
- 块级元素
- 行内元素
- float属性解读
- float
- clear
- position属性解读
- static
- relative
- fixed
- absolute
- flex高级布局
- 容器的属性
- flex-direction 属性
- flex - wrap属性
- flex-flow属性
- justify-content属性
- align-items属性
- align-content属性
- 项目的属性
- 响应式布局
- 语法
- 逻辑操作符
- and
- 逗号分隔符(or)
- not
- 媒体属性
- 手机Web自适应布局总结
标签（空格分隔）： HTML
最近应项目的需求，为了更好的支持产品开发。所以针对H5进行了系统学习。本人准备先从基本的布局开始，学习步骤： 布局 => 润色 => DOM操作 => 动画 => 其他 。
学习主要以Chrome浏览器为主，毕竟人家用户量最多。本人是在阅读大量技术资料，并进行二次消化总结出来的，文章的篇幅略长。
布局的基本属性
学习布局之前，需要先了解一个元素到底哪些属性会影响它在界面的形状和位置，这里我总结一下。
属性 | 备注 |
width | 元素宽度 |
height | 元素高度 |
margin | 边界 |
padding | 内边距 |
border | 边框 |
left | 距离左侧 |
right | 距离右侧 |
top | 距离顶部 |
bottom | 距离底部 |
就是上面这些基本的元素属性直接控制着元素的形状和位置。那float、display、postion、box-sizing这些属性作用是什么呢？它们存在会间接的影响这些属性最终的作用效果，可以使某些基本属性无效，某些基本属性有效。
##基本默认布局
body和html根标签
这里先来讨论一下body这个元素。body作为html的主体部分，是整个显示的最底层容器。假设我们给body一个边框样式，并设置高度为100px。
body {
height: 100px;
border: 2px solid black;
}我们发现，body的默认还有8px的margin距离。同时我们也发现，body默认也是块元素，占据整行宽度。
这里如果想设置body为占据整个屏幕，而不是跟随内容扩展。则需要将HTML的高度也设为100%。但是在本案例中，如果将body和html高度都设置为100%，会发现右侧出现滚动条的现象。是因为border和margin的会撑开了body的预设的宽度。
Tips:
这里如果想设置body为占据整个屏幕，而不是跟随内容扩展。则需要将HTML的高度也设为100%。但是在本案例中，如果将body和html高度都设置为100%，会发现右侧出现滚动条的现象。是因为border和margin的会撑开了body的预设的宽度。
盒子模型
盒子模型是css当中最重要的概念， 包括margin、padding、border、content。下面的是标准的盒子模型，当然还有IE盒子模型，这里主要以chrome为准，暂不讨论其他浏览器。
从这样图我们看到了，元素的高和宽，是不包括padding和border的。如果设置了元素的padding和border则该元素会撑大所占用的区域。如下图所示
这里我们就能看出来，设置padding和border会撑大元素的范围，如果不想撑大元素的范围的怎么办呢？我们可以使用：
元素的内容的大小变为了200*200的大小了，box-sizing属性的引入使得此元素的内边距和边框不再会增加它的宽度。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}display属性解读
这里我们先来尝试一下默认布局，这里我们只设置width和height属性，其他属性暂不进行设置，这里我们使用div 、p、 a 这三个标签来布局。
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div>
<p style="background: orange"> 比如，Langley（1996) 定义的机器学习是“机器学习是一门人工智能的科学，该领域的主要研究对象是<a href="#" style="width: 100px">人工智能</a>，特别是如何在经验学习中改善<a href="">具体算法</a>的性能”。 </p>
<p style="background: pink" > 比如，Langley（1996) 定义的机器学习是“机器学习是一门人工智能的科学，该领域的主要研究对象是<a href="#" style="width: 100px">人工智能</a>，特别是如何在经验学习中改善<a href="">具体算法</a>的性能”。（Machine learning is a science of the artificial. The field's main objects of study are artifacts, specifically algorithms that improve their performance with experience.'） </p>
<p style="background: green" > 比如，Langley（1996) 定义的机器学习是“机器学习是一门人工智能的科学，该领域的主要研究对象是<a href="#" style="width: 100px">人工智能</a>，特别是如何在经验学习中改善<a href="">具体算法</a>的性能”。（Machine learning is a science of the artificial. The field's main objects of study are artifacts, specifically algorithms that improve their performance with experience.'） </p>
</div>
</body>
</html>显示效果如下图：
这里p标签和a标签表现完全不同布局风格。p标签默认占用整行显示，而a标签就占据行内文本显示的区域。这里p标签就是块元素，a标签就是行内元素。通过设置display属性可以修改当前元素是块元素还是行内元素。下面会详细讲解
块级元素
块级元的特点：
- 总是从新行开始
- 高度、行高、外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块级元素
块级元素汇总：
块级元素 | 备注 |
address | 作者信息 |
blockquote | 标签定义块引用 |
caption | 定义表格的标题。在table标签内是块级元素，在外面是行内元素 |
dl、dt、dd | dl定义列表，dt定义项目，dd定义列表 |
ul、ol、li | ul 无序列表、ol有序列表、li列表元素 |
fieldset、legend | 标签将表单内容的一部分打包，生成一组相关表单的字段。legend元素为其表示标题 |
form | 表单元素 |
h1、h2、h3、h4、h5、h6 | 标题元素 |
hr | 水平分割线 |
p | 段落标签 |
pre | pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体 |
table、tbody、td、tfoot、th、thead、tr | tbody、tfoot、thead 是分组专用，必须全部使用。使用顺序thead、tfoot、tbody。tr是块级元素。td是行内元素 |
行内元素
行内元素的特点：
- 和相邻行内元素在一行上
height、width无效，可以通过line-height来设置- 设置margin和padding时， 只有左右
margin和padding有效，上下margin和padding无效 - 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他内联元素
行内元素汇总：
行内元素 | 备注 |
a | 超链接标签 |
b | 标签规定粗体文本 |
bdo | 元素可覆盖默认的文本方向 |
big | 标签呈现大号字体效果 |
cite | 标签通常表示它所包含的文本对某个参考文献的引用 |
button | 标签按钮，type类型为 submit、reset、button 没有具体语义 |
br | 插入一个简单的换行符 |
code | 标签用于表示计算机源代码或者其他机器可以阅读的文本内容 |
del | 删除元素，默认行内元素 |
dfn | 标签可标记那些对特殊术语或短语的定义 |
em | 标签告诉浏览器把其中的文本表示为强调的内容。 |
i | 标签显示斜体文本效果 |
iframe | 元素会创建包含另外一个文档的内联框架 |
img | 图片链接 |
input | 标签用于搜集用户信息。 |
ins | 标签定义已经被插入文档中的文本，下划线 |
map | 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像 |
object | 定义一个嵌入的对象。 |
q | 标签定义短的引用. 浏览器经常在引用的内容周围添加引号。 |
select | 元素可创建单选或多选菜单 |
small | 标签呈现小号字体效果 |
span | 标签被用来组合文档中的行内元素 |
strong | 用于强调文本，但它强调的程度更强一些 |
sub | 标签可定义下标文本 |
tt | 标签呈现类似打字机或者等宽的文本效果 |
textarea | 标签定义多行的文本输入控件 |
var | 标签表示变量的名称，或者由用户提供的值 var 、code、pre |
button | 发布按钮 |
button中的type的属性有哪些：
- button定义可点击按钮
- checkbox定义复选框
- file定义输入字段和浏览按钮，供文件上传
- hidden定义隐藏的输入字段
- image定义图像形式的提交按钮
- password定义密码字段
- radio定义单选按钮
- reset定义重置按钮
- submit定义提交按钮
- text定义单行的输入字段，用户可在其中输入文本
float属性解读
float
float属性用于创建浮动盒， 浮动盒会将元素的左边界或者右边界移动到包含一块或者另一个浮动盒的边界。
- left 移动元素，使其左边挨着包含块的左边界，或者另一个浮动元素的右边界
- right 移动元素，使其右边界挨着包含块的右边界，或者一个浮动元素的左边界
- none 元素位置固定
这里float有很多情况，我们用两个div来描述一下
- 首先是黄色模块，绿色模块都为float浮动元素。
如下:
这里，因为黄色元素是浮动元素，所以绿色浮动元素紧挨着黄色浮动元素。
- 黄色不是float元素，绿色是float元素。
如下：
这里绿色还是浮动元素，但是黄色不再是浮动元素了。float属性定义，紧挨着浮动元素边界或者包含块的边界，这里黄色不再是浮动元素，所以绿色在下面并挨着包含块边界。
- 黄色是float元素，绿色不是float元素
如下：
这里，绿色非浮动元素竟然在黄色浮动元素下面位置，浮动元素不在独占一行。关于float属性具体解释如下：
- 因为CSS的float属性，作用是改变块元素对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
- 给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入
- 设置了float的元素自成一根,类于一个缩小的document,脱离了文档。所以产生覆盖,float最初设计原因—-图文环绕.所以文字不会覆盖,而是环绕，也有例外：
- 设置了overflow:hidden的元素的文字也不会围绕
- ie浏览器中触发了haslayout的元素的文字不会围绕
clear
clear元素被用于控制浮动。主要是清除原来的浮动效果。回归文档流模式。存在left、right、both，分别用来清除向左浮动、清除向右浮动、清除左右浮动。
position属性解读
static
static是默认值。任意position:static; 的元素不会被特殊的定位。一个static元素表示它不会被“positioned”, 一个position属性被设置为其他值的元素表示它会被“positioned”。
relative
relative表示和static一样，除非你添加了一些额外的属性。
在一个相对定位(position属性为relative)的元素上设置top、right、bottom和left属性会使其偏离其正常位置。
注意：其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
举例：
这里我们看到当内部元素的position属性为relative时，属性top、left、bottom、right属性开始生效。设置其属性为10px,元素发生了偏移。但是下面的元素位置并未跟着发生变化。
当我们设置bottom、right为10px，我们发现，该元素偏移是根据初始所占区域的位置进行偏移。也就是说，不设置top、bottom、left、right值的时候的位置。
fixed
一个固定定位(position属性的值为fixed)元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和relative一样，top、right、bottom和left属性都可用。
一个固定定位元素不会保留它原本在页面应有的空隙(脱离文档流)。
举例：
这里右下角元素Position属性的值为fixed， 该元素的所在范围是以视窗为范围进行布局。脱离原来的文档流。不随着滚动在移动。
absolute
absolute是最棘手的position值。absolute与fixed的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素，那么它是相对于文档的body元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指position值不是static的元素。
举例：
这里我们将橙色元素的Position属性改为relative也就是”positioned“, 绿色元素就会相对于橙色元素进行布局。这里我绿色元素的bottom、right都是10px, 则绿色元素位移到了右下角，可以发现absolute元素相对于positioned的祖先元素的布局范围是祖先元素的范围。
所以我们可以看出这postioned的三个属性fixed、absolute、relative在设置left、right、bottom、top的四个属性值时，所参照的范围边界是不同的。
-
relative的参照范围是 元素初始位置，也就是并没有设置left、bottom、top、right时的所占区域。 absolute的参考范围是”positioned“的祖先元素所占据的范围，如果没有”positioned“的元素则是body元素,并且脱离了文档流。fixed的参照范围是整个窗口页面可视区域的范围并且脱离了文档流。
flex高级布局
采用Flex布局的元素，称为Flex容器(flex container) ，简称“容器”。 它的所有子元素自动称为容器成员，称为Flex项目,简称“项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴(cross axis)。
主轴的开始位置：(与边框的交叉点)叫做main start, 结束位置叫做main end; 交叉轴的开始位置叫做cross start ，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴的空间叫做main size, 占据的交叉轴空间叫做cross size.
容器的属性
- flex - direction
- flex -wrap
- flex- flow
- justify-content
- align-items
- align-content
flex-direction 属性
flex-direction 属属性决定主轴的方向(即项目的排列方向)，其属性值：
- row(默认值)：主轴为水平方向，起点在左端。
.box {
display: -webkit-flex;
display: flex;
flex-direction: row;
}
- **row-reverse：**主轴为水平方向，起点在右端。
演示代码：
.box {
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
}
演示代码：
.box {
display: -webkit-flex;
display: flex;
flex-direction: column;
}
- **column-reverse：**主轴为垂直方向，起点在下沿。
.box {
display: -webkit-flex;
display: flex;
flex-direction: column-reverse;
}
flex - wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。该属性定义，如果一条轴线排不下，如何换行。
可能取三个值：
- **nowrap(默认)：**不换行。
- **wrap:**换行，第一个行在上方。
- **wrap-reverse:**换行，第一个行在下方。
前面两个都好理解，最后这个比较难理解，我们来演示看看：
.box {
display: -webkit-flex;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
}看结果，第一行确实在下面位置。
flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
flex-flow: <flex-direction> || <flex-wrap>;justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。下面是可能取的五个值：
- **flex-start(默认值)：**左对齐
.box {
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: flex-start; /*默认值*/
}
- **flex-end：**右对齐
.box {
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
- **center：**居中
.box {
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: center;
}
- ** spacing-between: ** 两端对齐，项目之间的间隔相等
.box {
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: space-between;
}
- **spacing-around：**每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
.box {
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: spacing-around;
}
align-items属性
align-item属性定义项目在交叉轴上如何对齐。可能取的5个值如下：
- **flex-start：**交叉轴的起点对齐。
.box {
border: 2px solid black;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
width: 100%;
height: 400px;
}
.box-item{
width: 50px;
font-size: 40px;
text-align: center;
background: orange;
margin: 3px;
}
.box-item:nth-of-type(1){
height: 100px;
}
.box-item:nth-of-type(2){
height: 50px;
}
.box-item:nth-of-type(3){
height: 200px;
}
.box-item:nth-of-type(4){
height: 300px;
}这里为了展示，将几个元素的高度设为不等高，能清除看到效果。
- **flex-end：**交叉轴的终点对齐。
.box {
border: 2px solid black;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-end;
width: 100%;
height: 400px;
}这里我将上面的代码中align-items值改为flex-end,其他代码不懂，结果如下：
- **center：**交叉轴的中点对齐。
.box {
border: 2px solid black;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 400px;
}同样将上面CSS样式中的align-items改为center，效果如下：
- **baseline：**项目的第一行文字的基线对齐。
.box {
border: 2px solid black;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: baseline;
width: 100%;
height: 400px;
}
.box-item{
width: 50px;
font-size: 40px;
text-align: center;
background: orange;
margin: 3px;
}
.box-item:nth-of-type(1){
height: 100px;
font-size: 10px;
}
.box-item:nth-of-type(2){
height: 50px;
font-size: 20px;
}
.box-item:nth-of-type(3){
height: 200px;
font-size: 50px;
}
.box-item:nth-of-type(4){
height: 300px;
}这次我们设置，数字的字体大小不一样，将align-items设置为baseline，结果如下：
- **stretch(默认值)：**如果项目未设置高度或设为auto，将占满整个容器。
.box {
border: 2px solid black;
display: -webkit-flex;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
}
.box-item{
width: 50px;
/*height: 50px;*/
font-size: 40px;
text-align: center;
background: orange;
margin: 3px;
}
align-content属性
align-content属性定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
- **flex-start：**多跟主轴起点对齐。
.box {
border: 2px solid black;
display: -webkit-flex;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
width: 100%;
height: 400px;
}
.box-item{
width: 50px;
height: 50px;
font-size: 40px;
text-align: center;
background: orange;
margin: 3px;
}这里是我们可以设置了flex-wrap 让当前元素换行，这时候就产生了多根轴线，设置align-content值为flex-start效果如下：
- **flex-end：**多根主轴在终点对齐。
.box {
border: 2px solid black;
display: -webkit-flex;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-end;
width: 100%;
height: 400px;
}
.box-item{
width: 50px;
height: 50px;
font-size: 40px;
text-align: center;
background: orange;
margin: 3px;
}将align-content改为flex-end，效果如下：
- **center：**多根主轴在中点对齐。
将上边代码中align-content值改为center,效果如下：
- **space-between：**多根主轴两端对齐。
同样，将上面代码改为space-between后的效果： - **space-around:**每个主轴两侧的间隔相等。
将align-content值改为space-around后，效果如下： - **stretch(默认值)：**主轴上所有项目等高度拉伸。
项目的属性
- order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.box-item{
order:1 /*默认值为0*/
}
- flex-grow
flex-grow属性定义项目的放大比例，默认为0， 即如果存在剩余空间，也不放大。
.box-items{
flow-grow:1;
}
- flex-shrink
flex-shrink属性定义了项目缩小比例，默认为1， 即如果空间不足，该项目将缩小。 - flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间(main size)浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.box-items{
flex-basis:30px;
width:300px; /*这里无效*/
}这里我们看到了，当设置了flex-basis之后，原来的width属性无效了，取而代之的是flex-basis参数。它可以设置为width或height属性一样的值(比如350px)，则项目将占据固定空间。
- flex
flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto.
.box-item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}该属性有两个快捷键:auto (1 1 auto) 和 none (0 0 auto)
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
- align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性，如果没有父元素则等同于stretch。
响应式布局
“响应式布局”，是一种让网站针对不同浏览器和设备“呈现”不同显示效果的策略。
语法
媒体查询包含一个可选的媒体类型和零个或者多个满足CSS3规范的表达式。这些表达式描述了媒体特征，最终会被解析为true or false。
两种每次查询的方式：
<!--link 元素中的CSS媒体查询-->
<link rel="stylesheet" media="(max-width:600px)" href="./demo.css" />/* 在样式列表中使用媒体查询 */
@media (max-width:900px){
.static_div {
border: 2px solid red;
}
}逻辑操作符
and
and操作符用于合并多个媒体属性或合并媒体属性与媒体类型。
@media (max-width:400px) and (max-height:300px) {
.static_div {
border: 2px solid red;
}
}逗号分隔符(or)
媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时，如何任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表每个查询都是独立的，一个查询中的操作符并不影响其他的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。
/* 在样式列表中使用媒体查询 */
@media (max-width:400px), (max-width:300px) {
.static_div {
border: 2px solid red;
}
}not
not 关键字应用于整个媒体查询，在媒体查询为假时返回真。在逗号媒体查询列表中not仅会否定它应用到媒体查询而不影响其他的媒体查询。not关键字仅能用于整个查询，而不能用于一个独立的查询。
@media not all and (max-width:200px) {
.static_div {
border: 2px solid red;
}
}等价于：
@media not (all and (max-width:200px)) {
.static_div {
border: 2px solid red;
}
}媒体属性
通用媒体属性总结如下：
属性 | 值 | 是否接受min/max | 备注 |
width | length | 是 | 描述了输出设备的渲染区域的宽度 |
height | length | 是 | 描述了输出设备的渲染区域的高度 |
device-width | length | 是 | 描述了输出设备的宽度(整个屏幕或页的宽度，不仅仅是渲染宽度) |
device-height | length | 是 | 描述了输出设备的高度(整个屏幕或页的高度，不仅仅是渲染高度) |
orientation | lanscape\portrait | 否 | 指定了设备处于横屏,还是竖屏模式。 |
aspect-ratio | ratio | 是 | 描述了输出设备目标显示区域的宽高比 |
device-aspect-ratio | tatio | 是 | 描述了输出设备的宽高比。该值代表两个一个“/”分隔的正整数。 |
color | color | 是 | 指出设备每个像素单元的比特值，如果设备不支持输出颜色，则为零 |
color-index | integer | 是 | 指定了输出设备中颜色查询表中的条目数目 |
monochrome | color | 是 | 指定了一个黑白(灰度)设备每个像素的比特数。 |
scan | progressive\interlace | 否 | 描述了电视输出设备的扫描过程。 |
resolution | resolution | 是 | 指定了输出设备的分辨率(像素密度)。分辨率可以用没英寸(dpi)或每厘米(dpcm)的点数来表示。 |
grid | integer | 否 | 判断输出设备是网格还是位图设备。如果设备是基于网格的输出为1，否则为0 |
手机Web自适应布局总结
在移动开发之前，我们首先要做的就是加入以下这段内容：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">作用是将默认的宽度设定为设备的宽度，限制用户缩放屏幕，同时关闭手势缩放功能。
然后要做的就是宽度自适应手机的屏幕。设置width和height的值为100%;
div {
width:100%;
height:100%;
}其次使用REM属性，来设置统一高度等一系列可以用来用px来标注的单位。Rem是相对于根元素设置某个元素的字体大小。
这样就可以根据屏幕宽度大小，修改根元素的字体大小，来调整个界面。
有时候设计师们是在真实的iphone5机器上做的标注，而iphone5系列的分辨率是640，实际上我们在开发只需要按照320的标准来。为了节省时间，不至于每次都需要将标注取半，我们可以将整个网页缩放比例，模拟提高分辨率。这个做法很简单，为不同的设备设置不同的meta即可:
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');这种设置同样可以解决安卓机器下1px像素看起来过粗问题。因为在像素为1px的安卓下机器下，边框的1px被压缩成了0.5px了。
还有我们也可以使用媒体查询方式，修改根元素的大小，来自适应布局。
