移动端主流适配方案

标签：cli   案例   clear   固定高度   变化   1.0   移动端   大屏幕手机   ras   

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

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

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

2、响应式布局

优点：可以节约成本，不用再做专门的web app网站（外包公司、小公司、博客)；

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

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

优点：与设备做等比例的缩放；

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

4、目前主流做法rem    案例：淘宝移动端

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

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

两种方案：

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

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

5、未来趋势

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

1vw=10%设备宽度。

注：移动端基于标签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);

移动端主流适配方案

标签：cli   案例   clear   固定高度   变化   1.0   移动端   大屏幕手机   ras   

原文地址：http://www.cnblogs.com/ifworld/p/7616764.html