老师关于字体大小的问题

来源：7-2 作业题

慕莱坞4298532

2019-03-19 11:29:35

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>Title</title>
<link href="./Css/7-2.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="caption">
IMOOC
<span id="showbtn"></span>
</div>
<ul class="nav" id="navlist">
<li class="nav-active">Java</li>
<li>IOs</li>
<li>Android</li>
<li>php</li>
</ul>
<div class="logo">
<img src="image/1.png" id="img">
<div class="title">IMOOC</div>
</div>
<button class="start" id="btn">start</button>
</header>
<ul class="menu">
<li class="menu-active">关于慕课网</li> <li>关于课程</li> <li>核心团队</li> <li>新增专题</li>
</ul>
<section>
<div class="title">响应式</div>
<div class="text">
当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模
式让网站制作和維护成为一件轻松惬意的事。无论您是普通互联网用户，还是专业网站制作人员，
都能使用起飞页设计出最具专业水准的网站。想创建一个简单的单页式站点，还是一个专业的公司
网站，亦或是一个别具一格的博客?起飞页可以满足您的所有需求。我们是响应式网站的倡导者，
所有前端页面代码均采用HTML5和CSS3实现。起飞页提供了海里精美网站模板和成品网站，几乎覆
盖了当今各个行业，您只重在模板上进行少量修改，即可完成自己的网站，这一切都是免费的。
</div>
</section>
<div class="welcome">
<div class="name">IMOOC</div>
<div class="http">welcome to<a href="#">www.imooc.com</a></div>
</div>
<div class="main">
<div class="title">主打课程</div>
<div class="item">
<div class="item-img">
<img src="image/1.jpg">
</div>
<div class="item-img">
<img src="image/2.jpg">
</div>
<div class="item-img">
<img src="image/3.jpg">
</div>
<div class="item-img">
<img src="image/4.jpg">
</div>
<div class="item-img">
<img src="image/5.jpg">
</div>
<div class="item-img">
<img src="image/6.jpg">
</div>
</div>
</div>
<footer>CopyRight&copyright;2017 imooc.com All Right Reseved</footer>

<script src="./Js/7-2.js" type="text/javascript"></script>
</body>
</html>

*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration: none;
}
.nav-active{
color:#afafaf;
}
.menu-active{
color:#545454;
}
header{
background: #B2C5CC;
width:100%;
height:20rem;
position: relative;
color:#757575;
}
header .caption{
display: none;
}
.nav{
width:50%;
height:2rem;
line-height: 2rem;
margin:0 auto;
display: flex;
justify-content: space-between;
}
.logo{
width:4em;
height:4rem;
position:absolute ;
left:50%;
top:30%;
margin-left:-2rem;
text-align: center;
}
.logo img{
width: 100%;
height:100%;
}
.logo .title{
font-size: .4rem;
margin-top: .4rem;
}
.start{
width: 4.8rem;
height:2rem;
line-height: 2rem;
background: #ffffff;
text-align: center;
font-size: .4rem;
border-radius: .1rem;
position: absolute;
left:50%;
top:70%;
margin-left: -2.2rem;
}
.menu{
width:100%;
height: 3rem;
display: flex;
justify-content: space-around;
align-items: center;
font-size: .4rem;
color:#bababa;
border-bottom: .1rem solid #bababa ;
}
section{
padding:10% 22%;
}
section .title{
margin-bottom:.8rem;
text-align:center;
color:#757575;
}
section .text{
text-align: left;
font-size: .1rem;
line-height: 1.2rem;
color:#bababa;
}
.welcome{
padding:0 15%;
background:#f4f4f4 ;
line-height: 3rem;
display: flex;
color:#bababa;
}
.welcome .name{
font-size: .5rem;
flex:1
}
.welcome .http{
font-size: .3rem;
}
.welcome .http a{
color:#757575;
}
.main{
padding: 2% 15%;
background: url(../image/bg.jpg) repeat;
}
.main .title{
font-size: .8rem;
line-height: 2rem;
color:#757575;
font-weight: lighter;
}
.item{
width:100%;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
}
.item-img{
width:32%;
margin: .3rem 0;
}
.item-img img{
width:100%;
height:100%;
}
footer{
background: #f4f4f4;
font-size: .3rem;
line-height: 2rem;
text-align: center;
}
@media all and (max-width:376px){
header .nav{
width:100%;
display: flex;
flex-direction: column;
text-align: center;
background:#7ea6ae;
z-index: 3;
position: absolute;
left:0;
top:-9rem;
transition: all 1s ;
}
header .nav li{
border-bottom: 1px solid #bababa ;
background:#7ea6ae;
}
header .caption{
display: block;
height: 2.2rem;
line-height: 2.2rem;
text-align: center;
background:#7ea6ae;
}
header .caption span{
display: inline-block;
width: .5rem;
height: .5rem;
border: .1rem solid #bababa;
position: absolute;
right:1rem;
top:.8rem;
}
.item-img{
width:46%;
}
}

/**
* Created by xie on 2019/3/18.
*/

(function(doc, win) { //定义一个函数参数为（doc,win）
var docEl = doc.documentElement, // 将document传给doc document.documentElement获取的是html元素 document指的是整个文档结构
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //浏览器是否支持orientationchange（orientationchange当设备的方向发生变化时会触发该事件）事件，如果支持就出发orientationchange事件，如果不支持就触发resize事件
//resize 指js中的事件 widow指浏览器window对象 js BOM基础提及

recalc = function() {
var clientWidth = docEl.clientWidth; //获取的是浏览器视口的宽度，可以在控制台中输出看看
if (!clientWidth) return; //如果没有获取到宽度，直接返回，不执行下面的代码
if (clientWidth >= 768) { //对于手机屏幕来说，640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。所以在小于640px的时候改变html的font-size属性值。100*（可见区域宽度/640）+‘px’。这是页面宽度小于640px的一个计算公式，记住就可以了。
docEl.style.fontSize = '14px';
} else {
docEl.style.fontSize = 14 * (clientWidth / 768) + 'px';
}
};

if (!doc.addEventListener) return; //页面不支持事件监听，直接返回
win.addEventListener(resizeEvt, recalc, false);
//resizeEvt就是上面‘ resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',’接收的事件，拿orientationchange事件举例，这行代码的意思是窗口监听orientationchange事件，执行上面的recalc方法，第三个参数默认是false，在冒泡阶段执行

doc.addEventListener('DOMContentLoaded', recalc, false);
//当初始HTML文档已完全加载和解析时，将触发DOMContentLoaded事件，然后调用上面的recalc方法，默认在冒泡阶段执行
recalc(); //调用上面recalc = function()的方法
})(document, window); //将document和window传入函数 window 指窗体，document指页面，document对象可以理解为是window对象的一个子对象。

var isdown=false;
var btn=document.getElementById('showbtn'),
navlist=document.getElementById('navlist');
btn.onclick=function() {
if(!isdown){
navlist.style.top='2.2rem';
isdown=true;
}else{
navlist.style.top='-9rem';
isdown=false;
}
}