为何报错

来源:3-2 通用适配实现

weibo_我是LUFFCIER_0

2020-12-27 12:35:20

<!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"]'),

dpr=window.devicePixelRatio||1;

dpr=dpr>=3?3:(dpr>=2?2:1);

docEl.setAtrribute('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.setAtrribute('content',content);

  }

  else{

  viewportEl=document.createElement('meta');

  viewportEl.setAtrribute('name','viewport');

  viewportEl.setAtrribute('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;

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回答

好帮手慕星星

2020-12-27

同学你好,测试代码报错信息是setAttribute方法写错了,不是一个方法

http://img.mukewang.com/climg/5fe828e3098f47bf06590077.jpg

找到报错信息位置并修改就好了,如下

http://img.mukewang.com/climg/5fe829c709a2edd407380696.jpg

祝学习愉快!

0

0 学习 · 6815 问题

查看课程