手机端布局总结

手机端的布局，可依据效果，例如750，设置好html{font-size:数值}，

考虑到chrome下字体最小为12像素，即使小于12像素，也按照12像素显示的问题，同时又考虑到320像素（iPhone5的宽度），320情况下的font-size、不要小于12像素（因为小于12像素，例如为9像素，5rem是60（5*12）而不是45），

所以，750，可参考36像素 750/320 > 设置数值 / 12

 

 

用js控制好html的font-size，

<script type="text/javascript" src="js/zepto.min.js"></script>

function adjust(){
var clientWidth = $("body").width(),
baseWidth = 750, //依据基础效果图
fontSize = 36; // 设置750下，html基础字体为36 考虑webkit内核chrome下不能显示小于12号的字体
var s = clientWidth / baseWidth; // s 为浏览器宽度与基础效果图的比例
var root_html = $("html");
root_html.css("fontSize",s * fontSize + "px");
}

//判断手机横竖屏状态：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
adjust();
}, false);
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

$(document).ready(function(){
adjust();
});