title: 移动端的自适应也可以这样 date: 2015-03-04 15:04:25 tags: 布局 category: css
百分比布局，比例不好算，宽度也是把握不准， rem计算，还需要引入JS(淘宝，万里通)
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
//auto adaptation
var calculate_size = function () {
var BASE_FONT_SIZE = 100;
var docEl = document.documentElement,
clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 320) + 'px';
};
// Abort if browser does not support addEventListener
if (document.addEventListener) {
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
window.addEventListener(resizeEvt, calculate_size, false);
document.addEventListener('DOMContentLoaded', calculate_size, false);
calculate_size();
}
<meta name="viewport" content="width=640,user-scalable=no">
width等于设计的图的宽度，然后，设计图多少尺寸，布局就多少，就对了（或者除以二）
