适应屏幕的方案:
1、css3 Media queries (针对多版本设计稿)
2、设计稿不复杂的时候 通过宽度自适应用百分比3、通过更新meta:viewport标签,通过设计稿尺寸和设备尺寸的比例去设置
优点:
1、简单易懂,不需要JavaScript的支持,跨度大
2、适应能力强,代码量较少
3、适应能力强,针对不同的屏幕基本都可以适应
缺点:
1、代码量冗余,需要针对不同的屏幕尺寸去处理,
2、对设计稿有限制
3、页面比较大的时候,加载显示的时候会重绘(待验证)
1、可视区域宽度小于600的时候回应用
@media screen and (max- 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);