3-1 js代码

来源：3-1 header响应式布局（1）

hunmix

2018-02-09 16:07:19

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>移动端</title>
<style>
*{
margin:0px;
padding:0px;
}
/*补充代码*/
html{
font-size: 20px;
}
.box{
min-width: 680px;
display: flex;
justify-content: space-around;
padding-top: 20px;
padding-bottom: 20px;
background:#ccc;
}
.box-item{
display: flex;
flex-direction:column;
align-items:center;
box-sizing: border-box;
width: 10rem;
height: 30%;
overflow: hidden;
padding:15px;
text-align: center;
background:#fff;
font-size: 12px;
box-shadow:1px 1px 2px 1px #ccc;
border-radius: 10px;
}
.box-item>img{
width: 7rem;
height: auto;
border-radius:50%;
margin-bottom: 5%;
}
.box-item>p{
width: 7rem;
height: 4rem;
word-break:break-all;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<div class="box-item">
<img src="http://climg.mukewang.com/591411a400018ad902000200.jpg" alt="">
<h2>快乐动起来呀</h2>
<p>先后在360、去哪儿网、今日头条任资深前端工程师，在业务开发和工程架构方面有较多实战经验。</p>
</div>
<div class="box-item">
<img src="http://climg.mukewang.com/591411b400010aa702000200.jpg" alt="">
<h2>7七月</h2>
<p>作为微信小程序第一波开发者，他受邀编写小程序开发书籍，不久就会出版，他喜欢写代码带来成就感。</p>
</div>
<div class="box-item">
<img src="http://climg.mukewang.com/591411c0000199be02000200.jpg" alt="">
<h2>Geely</h2>
<p>Geely，丰富的互联网项目经验，公司内部技术讲师，热爱技术，乐于分享。教学格言：把复杂的技术简单化，简单的技术极致化</p>
</div>
<div class="box-item">
<img src="http://climg.mukewang.com/591411b400010aa702000200.jpg" alt="">
<h2>Scott</h2>
<p>是国内最早接触 Node.js 的工程师，也是最早用 Node.js 做开发的工程师之一，拥有大量 Node.js 全站开发经验。</p>
</div>
<div class="box-item">
<img src="http://climg.mukewang.com/591411cb0001483f02000200.jpg" alt="">
<h2>moocer</h2>
<p>曾混迹于企业应用领域，后转战电商，现奋战于互联网教育行业，转眼间已匆匆数年，喜爱技术甚于自己，至今不悔。感天地之广大，岁月之蹉跎，若能重来，仍代码。</p>
</div>
</div>
<script type="text/javascript">
(function(){
var doc=document.documentElement;
var resizeEvent="oriwntationchange" in window ? "orientationchange":"reszie";
function recalc(){
var clientWidth=document.documentElement.clientWidth;
if(!clientWidth) return false;
if(clientWidth>=1125){
doc.style.fontSize=20+"px";
}else if(clientWidth<1125 && clientWidth>681){
doc.style.fontSize=20*(clientWidth/1125)+"px";
console.log(doc.style.fontSize)
}else{
doc.style.fontSize=12+"px";
}
}
window.addEventListener("resize",recalc,false);
document.addEventListener('DOMContentLoaded',recalc,false);
})()
</script>
</body>
</html>

js部分
<script type="text/javascript">
		(function(){
			var doc=document.documentElement;
			var resizeEvent="oriwntationchange" in window ? "orientationchange":"reszie";
			function recalc(){
				var clientWidth=document.documentElement.clientWidth;
				if(!clientWidth) return false;
				if(clientWidth>=1125){
					doc.style.fontSize=20+"px";
				}else if(clientWidth<1125 && clientWidth>681){
					doc.style.fontSize=20*(clientWidth/1125)+"px";
					console.log(doc.style.fontSize)
				}else{
					doc.style.fontSize=12+"px";
				}
			}
			window.addEventListener("resize",recalc,false);
			document.addEventListener('DOMContentLoaded',recalc,false);
		})()
	</script>

刚才写作业的时候按视频的思路敲了一下，但是不知道图中圈出代码的用途，求告知QAQ

写回答

3回答