一.怎么让H5页面适应手机
a.利用meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
解释：Viewport指用户网页的可视区域，content中的“width”指的是虚拟窗口宽度，上面代码意为虚拟窗口/页面宽度初始比例为1，最小比例为1，最大比例为1，用户不可扩展，页面不可缩放。
<meta name="apple-mobile-web-app-capable" content="yes">
解释：添加到主屏幕后，全屏显示。
<meta name="apple-mobile-web-app-status-bar-style" content="black">
解释：作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。
b.百分比法
CSS中的百分比中指的是相对于父元素的宽度。子元素盒子width最好使用百分比来写，能最大可能的适应各种屏幕，但这只适合布局简单的页面，复杂的页面实现很困难。
c.使用css3的单位rem
rem是个单位，单位大小由它第一代老祖宗的font-size的大小决定。在页面载入开始时首先判断window的宽度（是window的宽度($(window).width())，不是屏幕分辩率的宽度（screen.width），两者差别请自行查阅），然后计算得出换算比例，等下下方会贴出相应的计算代码。
二.自适应动态设置html
例如以屏幕320像素为基准:
html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}
方法1：使用媒体查询换算出各分辨率的比例
@media screen and (min-width:320px) and (max-width:359px) and (orientation:portrait) { html { font-size: 625%; } } @media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) { html { font-size: 703%; } } @media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) { html { font-size: 732.4%; } } @media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) { html { font-size: 750%; } } @media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) { html { font-size:
