<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
[meta标签大全]:
(http://blog.csdn.net/yc123h/article/details/51356143)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
meta viewport 的6个属性：
width 值
height 设置layout viewport 的高度，这个属性并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
initial-scale 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
minimum-scale 设置页面的初始缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
viewport视口的作用
网页不是直接放入浏览器中的，而是先放入到viewport中，然后viewport在等比缩放到浏览器的宽度，放入浏览器，viewport在缩放的过程中，网页内容也被缩小了这样的话我们需要做一些处理，其实问题的根源在于viewport的宽度和浏览器宽度不一样，如果我们能将其设置为一样的话，不会出现这样的问题了我们可以通过meta标签来设置viewport将其设置为浏览器的宽度，也就是设备的宽度，这样的话布局就会简单多了
移动端布局方式与设计图
1. 固定布局，每一个元素都是固定的尺寸，内容区域居中在浏览器中间
内容区域的尺寸：980,1000,1100,1200
2. 响应式布局，利用媒体查询来实现不同尺寸的浏览器显示结构不一样
一般会有三张设计图，PC,平板,手机
3. 自适应布局，属于响应式里的一种，利用rem、百分比、vwvh等布局单位来实现
设计图一般只有一张，640、750居多
布局单位
1. %
优点：简单，无需设置，兼容性好
缺点：基于父元素的属性来设置，如果父元素没有宽高，设置无效
2. vwvh
一个vw等于viewport宽度的百分之一，一个vh等于viewport高度的百分之一
vmax等于vw和vh中较大的那个 vmin等于vw和vh中较小的那个
优点：简单，无需设置
缺点：兼容性不好
3. rem
一个rem等于根元素（html）的字体大小，兼容性很好
优点：兼容好，使用简单
缺点：需要设置
移动端适配的几个方法
1、将屏幕分成10份 百分比换算rem
<script> document.documentElement.style.fontSize=document.documentElement.clientWidth/10 + 'px'
</script>
2、自适应的rem 二倍的设计图量到的尺寸除2再除100就是自适应rem值
document.documentElement.style.fontSize=document.documentElement.clientWidth/3.2 + 'px'
3、认为世界的手机都是二倍宽的，然后再调整viewport
<meta name="viewport" content="width=320">