html5适应屏幕的方案

      适应屏幕的方案：

1、css3 Media queries (针对多版本设计稿)

2、设计稿不复杂的时候 通过宽度自适应用百分比

3、通过更新meta:viewport标签，通过设计稿尺寸和设备尺寸的比例去设置

优点：

1、简单易懂，不需要JavaScript的支持，跨度大

2、适应能力强，代码量较少

3、适应能力强，针对不同的屏幕基本都可以适应

缺点：

1、代码量冗余，需要针对不同的屏幕尺寸去处理，

2、对设计稿有限制

3、页面比较大的时候，加载显示的时候会重绘（待验证）

1、可视区域宽度小于600的时候回应用

 

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

 

3、根据设计稿和devicewidth 获得bfb 

var design = 420,device = document.documentElement.clientWidth;
     var bfb = (device/design).toFixed(1);
    
    var atts = "width="+design+", user-scalable=no, initial-scale="+bfb+", maximum-scale="+bfb+", minimum-scale="+bfb
     id.setAttribute("content",atts);