移动端布局

<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">