一、rem适配
移动端适配处理方式
(1)监听resize修改documentElementFontSize值
(2)页面内元素使用rem 比例1:100
(3)超过某个宽度(eg:750px),FontSize固定以适配PC端
(4)固定FontSize的PC端使用css @media 做样式的兼容处理
JS监听修改fontSize
(function($) {
(function(doc, win) {
var docEle = doc.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var recalc = function() {
var clientWidth = docEle.clientWidth;
if (!clientWidth) return false;
// 750根据设计图的原始比例尺寸进行调整
// 视口>=750以上 fontSize 固定
if (clientWidth >= 750 ) {
docEle.style.fontSize = '45px';
} else {
docEle.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return false;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
})(jQuery);
css @media 兼容处理
// 750px 以下
@media only screen and (max-width: 750px) { }
// 750px ~ 1919px
@media only screen and (min-width: 750px) and (max-width: 1919px) { }
// 1920px 以上
@media only screen and (min-width: 1920px) { }
二、页面缩放适配
;window.addEventListener('load', function() {
if("ActiveXObject" in window) return $("body").css("min-width", "1200px");
var width = window.innerWidth;
var new_width = (width / 1920);
$('body').css('zoom', new_width);
// var height = window.innerHeight;
// var new_height = (height / 969);
// $('body').css('zoom', new_height);
window.addEventListener('resize', function() {
var width = window.innerWidth;
var new_width = (width / 1920);
$('body').css('zoom', new_width);
});
});