1.rem布局,根据屏幕来计算rem,也就是意义上的适应屏幕,但是一些字体大小转换和计算有些复杂。
// rem 布局重定义 (function(){ $('html').css('font-size', ($(window).width() - 2) / 10); var multiple = parseFloat($('html').css('font-size')) / ($(window).width() - 2) * 100; if(multiple != 10){ $('html').css('font-size', ($(window).width() - 2) / multiple); } document.write('<meta name = "format-detection" content = "telephone=no">'); })();
2.360布局就是说把屏幕按照360的尺寸自动放大缩小,这样用px就可以兼容所有手机了。
(function (window, document, width) {
var content = "user-scalable=no,width=" + width;
if( window.PhoneSystem.name == "Android" && window.parseInt(window.PhoneSystem.version[0]) <= 4 && window.parseInt(window.PhoneSystem.version[1]) < 5) {
content += ",target-densitydpi=device-dpi";
}
content += ",initial-scale=" + window.screen.width / width;
content += ",minimum-scale=" + window.screen.width / width;
content += ",maximum-scale=" + window.screen.width / width;
var meta = document.createElement("meta");
meta.setAttribute("name", "viewport");
meta.setAttribute("content", content);
var head = document.getElementsByTagName("head")[0];
head.insertBefore(meta, document.getElementsByTagName("meta")[0]);
})(window, document, 360);