jQuery的自适应布局

来源：互联网发布：金山数据恢复大师编辑：程序博客网时间：2024/06/05 18:50

1.字体大小用em，边框用em

其他的用rem

<!DOCTYPE html>

<head>

<title>index</title>

<style>

margin: 0;

padding: 0;

}

img{

width: 3.75rem;

height: 2.34rem;

}

</style>

</head>

<body>

rfgrgr4

// 根据设备的尺寸来定制不同的长度值，比如width，height，marginTop等

//rem是根元素的字体大小，1rem = html的字体大小

var recalc = function(){

var width = document.documentElement.clientWidth;

var height = document.documentElement.clientHeight;

document.documentElement.style.fontSize = 100*(width/375)+"px";

};

var resizeEvent = "orientationchange" in window?"orientationchange":"resize";

//当屏幕反转的时候执行

window.addEventListener(resizeEvent,recalc,false);

//刚进入的时候执行

document.addEventListener("DOMContentLoaded",recalc,false);

// console.log(width+";"+height);

</script>

</body>

</html>

阅读全文

1 0