zoom:100%显示不完全
来源：7-2 作业题
PHXL
2019-03-23 21:40:28
当浏览器调试工具的zoom为73%及一下时显示正常
当room调到100%时红框内容就显示不出来了
还有这个fit to window是啥意思？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1 maximum-scale=1 user-scalable=no">
<title>7-2 作业题-慕课网就业班</title>
<link rel="icon" type="image/png" href="img/titleicon.png">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="wrapper">
<!-- 顶部 -->
<header>
<nav>
<ul>
<li class="active">前端</li>
<li>java</li>
<li>ios</li>
<li>Android</li>
<li>php</li>
</ul>
</nav>
<div class="center">
<img src="img/1.png">
<span>IMOOC</span>
</div>
<input type="button" value="start">
</header>
<section class="nav">
<div class="active">关于慕课网</div>
<div>关于课程</div>
<div>核心团队</div>
<div>新增专题</div>
</section>
<section class="intro">
<p>响应式</p>
<p>当今最领先的响应式自助建站平台,我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户,还是专业网站制作入员,都能使用起飞页设计出最具专业水准的网站。想创建一个简单的单页式站点,还是一个专业的公司网站・亦或是一个别具一格的博客?起飞页可以満足您的所有需求。我们是响应式网站的倡导者,所有前端页面代码均采用HTML5和CSS3实现。起飞页提供了海量精美网站模板和成品网站,几手覆盖了当今各个行业,您只需在模板上进行少里修改・即可完成自己的网站,这一切都是免费的。
</p>
</section>
<div class="mes">
<span>IMOOC</span>
<span>welcome to <a href="www.imooc.com">www.imooc.com</a></span>
</div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
list-style: none;
}
a{
text-decoration: none;
}
html{
font-size: 14px;
font-family: serif;
}
@keyframes anima1{
from{background-position: -28.5rem -2.6rem;}
to{background-position: 28.5rem 2.6rem;}
}
@keyframes anima2{
from{transform: rotate(90deg);}
to{transform: rotate(0deg);}
}
}
/*iPad响应式页面*/
@media screen and (max-width:800px){
header{
width:100%;
height:50rem;
background: #B2C5CC;
}
header>nav{
padding-top:3.1rem;
display: flex;
justify-content: center;
}
header>nav ul{
display: flex;
justify-content: space-between;
width: 30rem;
color:#757575;
}
header>nav ul .active{
color:#afafaf;
}
header>.center{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 7.8rem;
color: white;
}
header>.center span{
margin-top: 2.8rem;
font-size:1.2rem;
}
header input{
display:block;
width: 11rem;
height:3.3rem;
font-size: 1.1rem;
letter-spacing: 0.08rem;
background: #fff;
border:none;
margin:5.8rem auto;
}
.nav{
width: 100%;
height: 5.6rem;
line-height: 5.6rem;
border-bottom:0.14rem solid #ccc;
font-size: 1.1rem;
color:#bababa;
display: flex;
justify-content: space-around;
}
.nav>.active{
color:#545454;
}
.intro{
width: 100%;
height: 35rem;
text-align: center;
}
.intro>p:first-child{
margin-top: 8.4rem;
font-size: 1.5rem;
color:#424242;
font-weight: bold;
}
.intro>p:last-child{
width: 38.5rem;
margin:0 auto;
text-align: left;
margin-top: 2.3rem;
font-size: 1.1rem;
color:#bababa;
line-height: 2.3rem;
}
.mes{
width: 100%;
line-height: 5.4rem;
background: #f4f4f4;
display: flex;
justify-content: space-between;
font-size: 1.15rem;
color:#6b6b6b;
}
.mes>span:first-child{
font-size: 1.2rem;
margin-left: 4.3rem;
}
.mes>span:last-child{
margin-right: 4.3rem;
}
.mes>span:last-child a:link,
.mes>span:last-child a:visited{
font-weight: bold;
color:#626262;
}
}
/*iPhone6响应式页面*/
@media screen and (max-width:400px){
}
3回答
-
Steve007
2019-03-24
同学，你好。这是因为显示器分辨率的问题，同学可以按f11全屏下查看，就可以显示完全了。如果不想全屏显示，可以调到合适的百分比页面来查看效果。
祝学习愉快！
0h019-03-24 -
PHXL
提问者
2019-03-24
浏览器换成全屏模式可以看到下面的内容了，再把zoom调大又看不到了
0 -
PHXL
提问者
2019-03-24
是rem单位没有用对吗？
0
相似问题