移动端适配

总结下自己用过的几种移动端适配方法
百分比适配
宽度高度按照所占百分比计算 写css
缺点:复杂些的布局就满足不了 不能百分百还原设计图

Rem布局 js动态计算html font-size值
宽度高度按照320px的设计图切图 rem与之对应的关系是 1rem=20px

用js根据视图宽度计算 html的font-size值

function resetRem(){
var rect = window.document.documentElement.getBoundingClientRect();
//window.devicePixelRatio;
var width = rect.width > 540 ? 540 : rect.width;

var rootEm = parseFloat(width/320 * 20);
//alert(rect.width + " / " + rootEm);
$("html").css("font-size", rootEm + "px");
}

$(window).bind("resize", function(){
window.setTimeout(resetRem, 300);
});

resetRem();

3. vw布局
与rem布局类似 不过单位换成vw 1vw=1% 视图宽度
浏览器会自动根据视图大小变换 不用js

本文出自 “SS2TT” 博客，谢绝转载！