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);

巴特西

html5适应屏幕的方案

最新文章

热门文章