html5移动端主流适配方案

一、流式布局（百分比布局）    案例：京东移动端

优势：简单方便，只须要固定高度，宽度自适应；

缺点：大屏幕手机实际显示的不协调。

二、响应式布局

优势：能够节约成本，不用再作专门的web app网站（外包公司、小公司、博客)；

缺点：工做量大、维护很难；国内大型企业在移动端不多用。

三、固定宽度     案例：荔枝FM   640px

优势：与设备作等比例的缩放；

缺点：在大屏幕手机下两边留白，操做按钮小。

四、目前主流作法rem    案例：淘宝移动端

rem：font size of root element 相对于根目录字体的大小；

优势：能等比例的适配全部的屏幕，rem是根据html的font-size大小来变化的，基于这个出发，咱们能够在任何一个设备下根据设备的宽度来设置html字号，从而实现自适应布局。

两种方案：

　　（1）rem随设备宽度作自适应，scale值固定为1；

　　（2）rem随设备宽度作自适应，viewport进行缩放，scale值不固定。

五、将来趋势

vw/vh  相对于viewport理想的视窗（设备）的比例；（目前兼容性较差）

1vw=1%*设备宽度。

 

注：移动端基于标签meta

<meta name="viewport" content="width=device-width,initial-scale=1.0">

附：javascript获取设备宽度并设置根目录下字体大小的一种方法

！function(win){

　　var oHtml=win.document.documentElement; //获取html

　　var timer=null;

 　　function changeRem(){

       　　var width=oHtml.getBoundingClientRect().width; //获取设备的宽度，IE浏览器要作兼容处理

　　　　if(width>540){

　　　　　　width=540;

　　　　}

　　　　var rem=width/10;

　　　　oHtml.style.fontSize=rem+"px"; //设置根目录下字体大小

　　}

　　win.addEventListener("rasize",function(){

　　　　clearTimeout(timer);

　　　　timer=setTimeout(changeRem,300);

　　})

　　changeRem();

 }(window);