为什么调试的时候看不到下面的内容了
来源：7-2 作业题
慕设计3487605
2019-02-15 11:44:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<section class="section1">
<nav>
<a href="#" class="active">前端</a>
<a href="#">java</a>
<a href="#">ios</a>
<a href="#">Android</a>
<a href="#">php</a>
</nav>
<div><img src="img/1.png"></div>
<div>IMOOC</div>
<div class="btn">start</div>
</section>
<section class="section2">
<nav>
<a href="#" class="active">关于慕课网</a>
<a href="#">关于课程</a>
<a href="#">核心团队</a>
<a href="#">新增专题</a>
</nav>
</section>
<section class="section3">
<h3>响应式</h3>
<p>当今最领先的响应式自助建站平台，当今最领先的响应式自助建站平台。当今最领先的响应式自助建站平台，当今最领先的响应式自助建站平台当今最领先的响应式自助建站平台，当今最领先的响应式自助建站平台。当今最领先的响应式自助建站平台当今最领先的响应式自助建站平台，当今最领先的响应式自助建站平台。当今最领先的响应式自助建站平台，当今最领先的响应式自助建站平台当今最领先的响应式自助建站平台。</p>
</section>
<section class="section4">
<div>IMOOC</div>
<div>welcome to <a href="#">www.imooc.com</a></div>
</section>
<section class="section5">
<div>主打课程</div>
<div>
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
<img src="img/6.jpg"/>
</div>
</section>
<section class="section6">
Copyright © 2017 imooc.com ALL Rights Reserved
</section>
</body>
</html>
*{
padding: 0;
margin: 0;
font-family: "微软雅黑";
font-size: 16px;
}
a{
text-decoration: none;
}
/* ipad */
/* section1 */
.section1{
background: #B2C5CC;
color: #757575;
width: 100%;
height: 30rem;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1.5rem;
}
.section1 nav{
margin-bottom: 5rem;
}
.section1 nav a{
display: inline-block;
margin: 0 1.3rem;
color: #757575;
}
.section1 nav a.active{
color: #afafaf;
}
.section1 div{
margin-bottom: 1.5rem;
}
.section1 div:nth-of-type(2){
color: #fff;
}
.section1 div.btn{
margin-top: .8rem;
width: 8rem;
height: 2rem;
line-height: 2rem;
text-align: center;
background: rgb(255, 255, 255);
}
/* section2 */
.section2 nav{
width: 100%;
height: 5rem;
border-bottom: .06rem solid #999;
display: flex;
justify-content: space-around;
align-items: center;
}
.section2 nav a{
color: #bababa;
}
.section2 nav a.active{
color: #545454;
}
/* section3 */
.section3{
width: 100%;
height: 15rem;
padding: 6rem 0;
display: flex;
flex-direction: column;
align-items: center;
}
.section3 h3{
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #545454;
}
.section3 p{
width: 40%;
font-size: .8rem;
color: #bababa;
line-height: 1.2rem;
}
/* section4 */
.section4{
background: #f4f4f4;
padding: 0 3rem;
height: 4rem;
color: #545454;
display: flex;
justify-content: space-between;
align-items: center;
}
.section4 div a{
color: #000;
}
/* section5 */
.section5{
background: url('../img/bg.jpg');
padding: 1.5rem;
color: #545454;
}
.section5 div:nth-child(1){
margin-bottom: 1rem;
}
.section5 div:nth-child(2){
width: 100%;
height: 20rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.section5 div:nth-child(2) img{
width: 31%;
height: 45%;
}
/* section6 */
.section6{
width: 100%;
height: 4rem;
line-height: 4rem;
text-align: center;
}
为什么在谷歌浏览器调试的时候看不到section5和section6的内容了？
2回答
-
你好，同学说的是在iPad设备下设置100%之后，后面两个部分看不见的是吗，这边测试是这样的效果：
已经滚动到了页面的底部。
因为iPad设备高度是1024px，设置100%也就是1024px，但是显示器分辨率在垂直方向上没有那么大，所以有一部分就看不到了，可以调整为75%或者50%进行测试。
祝学习愉快！
0 -
慕设计3487605
提问者
2019-02-15
老师，我把放大比例调到50%就可以看到了，100%就看不到下面的内容
0
相似问题
回答 2