移动端h5框架自适应_移动h5自适应布局

http://www.cnblogs.com/samwu/p/4285748.html(转)

问题一，分辨率Resolution适配：

不同屏幕宽度，html元素宽高比和字体大小，元素之间的距离自适应，使用rem单位。

问题二，单位英寸像素数PPI适配：

使用rem单位，文字会发虚。段落文字，使用px单位，用media query或js来适配。标题文字可以直接使用rem单位。

问题三，设备像素比例DPR适配：

1物理像素在

显示效果不合需求。要根据devicePixelRatio来修改meta标签的scale

参考：

http://www.html-js.com/article/2402

http://isux.tencent.com/web-app-rem.html

https://github.com/amfe/lib.flexible

demo如下：

移动h5自适应布局

/*320px布局*/

html{font-size: 100px;}

body{font-size: 0.14rem;/*实际相当于14px*/}

body{

padding:0;

margin:0;

}

.div2{

font-size:0.14rem;

}

.div3{

width:3rem;

height:3rem;

border