function resetWidth(){
//兼容IE浏览器document.clientWidth
var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(baseWidth);
//默认的设置是375px的根元素设为100px,其他的手机都相对这个进行调整
document.documentElement.style.fontsize=baseWidth/375*100+'px'
}
resetWidth();
window.addEventListener('resize',function(){
resetWidth();
})
注意：根元素设置font-size:100px;
注意：头部加上->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
然后body可以设置font-size: 16px;
box-sizing: border-box;一般在写页面的时候用这个属性就不会再考虑边框和内边距会改变整体所占宽度
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 视口宽度与设备宽度一样 禁止用户缩放 -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
<style>
// 当我们拖动网页或者刚改手机的时候,html的font-size会发生改变
html {
font-size: 100px;
}
body {
font-size: 16px;
}
h1 {
font-size: 0.12rem;
}
// 试试手机为ip6plus和ip5时,div的宽高各是多少(px)
div {
width: 1rem;
height: 1rem;
background: gray;
line-height: 1rem;
}
</style>
</head>
<body>
<script>
function resetWidth() {
// 兼容ie浏览器 document.body.clientWidth
var baseWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(baseWidth);
// 默认的设置是375px(ip6)的根元素设为100px, 其他的手机都相对这个进行调整
document.documentElement.style.fontSize = baseWidth / 375 * 100 + 'px'
}
resetWidth();
window.addEventListener('resize', function () {
resetWidth();
})
</script>
<div>
内容
</div>
</body>
</html>
网友评论