h5实现网页内容跟随窗口大小移动_HTML5实现移动页面自适应手机屏幕的方法

1、使用meta标签：viewport

H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中，通常这个虚拟的"窗口"(viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局)，用户可以通过平移和缩放来看网页的不同部分。

viewport标签极其属性：

每个属性的详细介绍：属性名取值描述width正整数 或 device-width定义视口的宽度，单位为像素

height正整数 或 device-height定义视口的高度，单位为像素，一般不用

initial-scale[0.0-10.0]定义初始缩放值

minimum-scale[0.0-10.0]定义缩小最小比例，它必须小于或等于maximum-scale设置

maximum-scale[0.0-10.0]定义放大最大比例，它必须大于或等于minimum-scale设置

user-scalableyes/no定义是否允许用户手动缩放页面，默认值yes

2、使用css3单位rem

rem是CSS3新增的一个相对单位(root em，根em),使用rem为元素设定字体大小时，是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了I