为什么我相同的页面在IPAD和IPHONE上差距这么大
来源：7-2 作业题
精慕门9328699
2019-01-16 20:38:59
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式布局</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/task7-2.css">
<script type="text/javascript" src="js/task7-2.js"></script>
</head>
<body>
<section>
<div class="header">
<div class="nav1">
<a href="" class="active1">前端</a>
<a href="">java</a>
<a href="">ios</a>
<a href="">Android</a>
<a href="">php</a>
</div>
<img src="images/1.png" alt="">
<p>IMOOC</p>
<input type="button" name="button" value="start">
</div>
</section>
<section>
<div class="nav2">
<a href="" class="active2">关于慕课网</a>
<a href="">关于课程</a>
<a href="">核心团队</a>
<a href="">新增专题</a>
</div>
</section>
<section>
<div class="article">
<span>响应式</span>
<p>当今最领先的响应式建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。想创建一个简单的单页式站点，还是一个专业的公司网站，亦或是一个别具一格的博客？起飞页可以满足您的所有需求。我们是响应式网站的倡导者，所有前端页面代码均采用HTML5和CSS3实现。起飞页提供了海量精美网站模板和成品网站，几乎覆盖了当今各个行业，您只需在模板上进行少量修改，即可完成自己的网站，这一切都是免费的。</p>
</div>
</section>
<section>
<div class="link">
<span>IMOOC</span>
<span>welcome to<a> www.imooc.com</a></span>
</div>
</section>
<section>
<div class="lesson">
<h1>主打课程</h1>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
</div>
</section>
<section>
Copyright@2017 imooc.com All Rights Reserved
</section>
</body>
</html>
*{margin: 0;padding: 0;}
a{text-decoration: none;}
section:nth-child(1){
background: #b2c5cc;
height: 6rem;
}
.header{
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.header>.nav1{
width: 46%;
display: flex;
justify-content: space-around;
margin: 0.4rem 0 100px 0;
}
.header>.nav1>a{
display: block;
color: #757575;
font-size: 0.15rem;
}
.header>.nav1>.active1{
color: #afafaf;
}
.header>p{
color: #fff;
margin: 0.4rem 0 0.7rem 0;
font-size: 0.15rem;
}
.header>img{
width: 13%;
}
.header>input{
width: 16%;
height:6%;
font-size: 0.15rem;
background-color: #fff;
outline: none;
border: none;
}
section:nth-child(2){
background: #fff;
height: 0.8rem;
}
.nav2{
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
.nav2>a{
color: #bababa;
font-size: 0.15rem;
}
.nav2>.active2{
color: #545454;
}
section:nth-child(3){
background: #fff;
height: 4.85rem;
border-top: 1px solid gray;
text-align: center;
}
.article{
width: 48%;
margin: 0 auto;
}
.article>span{
margin: 1.1rem 0 0.28rem 0;
font-size: 0.2rem;
}
.article>p{
text-align: left;
font-size: 0.13rem;
color: #bababa;
}
section:nth-child(4){
background: #f4f4f4;
height: 0.74rem;
}
.link{
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
font-size: 0.15rem;
padding: 0 8%;
color: #bababa;
}
.link>span>a{
color: #000;
}
section:nth-child(5){
padding: 0.7rem 0;
height: 5.4rem;
background: url(../images/bg.jpg) no-repeat;
background-size: cover;
}
.lesson{
height: 100%;
margin: 0 4% 0 6%;
}
.lesson>h1{
font-size: 0.2rem;
margin-bottom: 0.16rem;
color: #bababa;
}
.lesson>img{
width: 32%;
height: 44%;
margin-right: 1%;
margin-bottom: 1%;
display: block;
float: left;
}
section:nth-child(6){
background:#f1f1f1;
height: 0.64rem;
text-align: center;
line-height: 0.64rem;
font-size: 0.15rem;
}
@media screen and (max-width: 376px){
.link{
justify-content: space-around;
flex-direction: column;
}
}
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 640) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
recalc();
})(document, window);
1回答
-
你好，经测试iPad与iPhone6设备上都是可以正常显示的，同学说的差距大是指哪个部分呢，可以详细具体描述一下哦。
祝学习愉快！
0
相似问题
回答 3
回答 2