为什么我的minWidth 和maxWidth不起作用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" >
<title>Document</title>
<style type="text/css">
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.header-container,
.footer-container{
position: fixed;
z-index: 999;
border-bottom: 0.025rem solid black;
}
.header-container{
width: 100%;
background-color: rgba(222,24,27,0.8);
height: 2.5rem;
top: 0;
}
.main-container{
padding: 2.5rem 0;
}
.slider-container{
height: 9.15rem;
background-color: green;
}
.nav-container{
height: 8.475rem;
background-color:blue;
}
.recommend-container{
height: 50rem;
background-color: pink;
}
.footer-container{
width: 100%;
background-color: green;
height: 2.5rem;
bottom: 0;
}
</style>
<script type="text/javascript">
(function(){
var docEl=document.documentElement,
viewportEl=document.querySelector('meta[name="viewport"]'),
maxWidth = 540,
minWidth = 320,
dpr=window.devicePixelRatio||1;
dpr=dpr>=3?3:(dpr>=2?2:1);
docEl.setAttribute('data-dpr',dpr);
var scale=1/dpr,
content="width=device-width, initial-scale="+scale+", maximum-scale="+scale+", minimum-scale="+scale+", user-scalable=no";
if(viewportEl){
viewportEl.setAttribute('content',content);
}
else{
viewportEl=document.createElement('meta');
viewportEl.setAttribute('name','viewport');
viewportEl.setAttribute('content',content);
document.head.appendChild(viewportEl);
}
setRem();
window.addEventListener("resize",setRem);
function setRem(){
var ratio=18.75;
var viewWidth=document.documentElement.getBoundingClientRect().width || window.innerWidth;
if(viewWidth/dpr>maxWidth){
viewWidth=maxWidth*2;
}
else if(viewWidth/dpr<minWidth){
viewWidth=minWidth*2;
}
document.documentElement.style.fontSize=viewWidth/ratio+'px';
}
})();
</script>
</head>
<body>
<div class="header-container"></div>
<div class="main-container">
<div class="slider-container"> </div>
<nav class="nav-container"> </nav>
<div class="recommend-container"> </div>
</div>
<div class="footer-container"></div>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星