求赐教,不知道是浏览器问题还是。。
来源：3-2 作业题
慕盖茨6136029
2019-09-28 10:43:36
太诡异了，下面的html里，第五区域我写上之后第三区域的文字会变大是为什么，注释掉之后就正常了
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/index.css"> <script src="./js/flexible.js"></script> </head> <body> <!-- 第一区域 --> <div class="firstArea"> <!-- iphone6 --> <div class="head"> <a href="javascript:;" class="title">imooc</a> <span class="toggle"></span> <div class="toggle-layer hide"> <a href="javascript:;" class="active">前端</a> <a href="javascript:;">java</a> <a href="javascript:;">ios</a> <a href="javascript:;">Android</a> <a href="javascript:;">php</a> </div> </div> <!-- ipad --> <div class="head2"> <a href="javascript:;" class="active">前端</a> <a href="javascript:;">java</a> <a href="javascript:;">ios</a> <a href="javascript:;">Android</a> <a href="javascript:;">php</a> </div> <div class="logo"> <img src="./img/1.png"> <span class="text">IMOOC</span> </div> <button type="button">start</button> </div> <!-- 第二区域 --> <div class="secondArea"> <a href="javascript:;" class="active">关于慕课网</a> <a href="javascript:;">关于课程</a> <a href="javascript:;">核心团队</a> <a href="javascript:;">新增专题</a> </div> <!-- 第三区域 --> <div class="thirdArea"> <div class="title">响应式</div> <P>响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之， 就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及， 用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。 </P> </div> <!-- 第四区域 --> <div class="fourthArea"> <div class="title">IMOOC</div> <div class="welcome">welcome to <a href="javascript:;">www.imooc.com</a></div> </div> <!-- 第五区域 --> <!-- <div class="fifthArea"> <div class="course">主打课程</div> <div class="images"> <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> </div> --> <!-- 第六区域 --> <div class="sixthArea"></div> <script src="./js/index.js"></script> </body> </html>
base.css
html,body,div,a{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
img{
vertical-align: top;
width: 100%;
}index.css
/* ----------------第一区域--------------------- */
/* 头部 */
.firstArea{
background-color: #b2c7cd;
width: 100%;
height: 12rem;
position: relative;
}
.firstArea .head2{
display: none;
}
.firstArea .head{
width: 100%;
height: 2rem;
background-color: #7da7ae;
line-height: 2rem;
text-align: center;
position: relative;
}
.firstArea .head .title{
color: #ffffff;
font-size: 20px;
display: block;
height: 100%;
}
.firstArea .head .toggle{
position: absolute;
height: .5rem;
width: .5rem;
border: 2px solid #b2c7cd;
top: 50%;
transform: translate(0,-50%);
right: 1rem;
}
.firstArea .toggle-layer{
position: absolute;
z-index:3;
top: 2rem;
width: 100%;
height: 7.5rem;
text-align: center;
transition: all .5s;
overflow: hidden;
}
.firstArea .hide{
height: 0;
}
.firstArea .toggle-layer a{
display: block;
width: 100%;
border-bottom: 1px solid #b2c7cd;
background-color: #7EA6B1;
height: 1.5rem;
font-size: 14px;
line-height: 1.5rem;
color: #ffffff;
}
.firstArea .toggle-layer a:first-child{
border-top: 1px solid #b2c7cd;
}
@media screen and (min-width:768px) {
.firstArea .head{
display: none;
}
.firstArea .head2{
display: block;
height: 2rem;
display: flex;
padding-left: 25%;
padding-right: 25%;
justify-content: space-between;
align-items: center;
font-size: 30px;
}
.firstArea .head2 a{
color: #84949c;
}
.firstArea .head2 .active{
color: #a5b3b4;
}
}
/* logo */
.firstArea .logo{
width: 3rem;
font-size: 12px;
color: #ffffff;
margin-top: 1rem;
position: absolute;
left: 50%;
transform: translate(-50%,0);
text-align: center;
}
.firstArea .logo .text{
display: block;
padding-top: .8rem;
}
.firstArea button{
width: 3.5rem;
border: none;
position: absolute;
background-color: #fff;
height: 1rem;
left: 50%;
top:8rem;
transform: translate(-50%,0);
}
@media screen and (min-width:768px) {
.firstArea .logo{
font-size: 30px;
}
.firstArea button{
font-size: 30px;
}
}
/* ----------------第二区域--------------------- */
.secondArea{
height: 2rem;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-size: 16px;
display: flex;
justify-content: space-around;
align-items: center;
}
.secondArea a{
color: #e2e2e2;
}
.secondArea .active{
color: #5a5a5a;
}
@media screen and (min-width:768px) {
.secondArea{
font-size: 30px;
}
}
/* ----------------第三区域--------------------- */
.thirdArea{
padding: 1em 4rem 2rem;
text-align: center;
}
.thirdArea .title{
color: #6a7277;
font-size: 18px;
text-align: center;
}
.thirdArea p{
font-size: 12px;
line-height: 24px;
color: #ccc;
text-align-last: left;
}
@media screen and (min-width:768px) {
.thirdArea .title{
font-size: 48px;
}
.thirdArea p{
font-size: 24px;
line-height: 48px;
}
}
/* ----------------第四区域--------------------- */
.fourthArea{
text-align: center;
height: 2rem;
padding: .3rem 0;
background-color: #f4f4f4;
color: #b8c2ca;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.fourthArea .title{
font-size: 20px;
}
.fourthArea .welcome{
font-size: 18px;
}
.fourthArea .welcome a{
color: #181818;
}
@media screen and (min-width:768px) {
.fourthArea{
display: flex;
padding: 0 1rem;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.fourthArea .title{
font-size: 40px;
}
.fourthArea .welcome{
font-size: 36px;
}
}flexible.js
(function(){
'use strict'
var docElem = document.documentElement;
var dpr = window.devicePixelRatio || 1;
var viewportEl = document.querySelector('meta[name="viewport"]');
var maxWidth = 800;
var minWidth = 320;
dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);
docElem.setAttribute('data-dpr', dpr);
docElem.setAttribute('max-width', maxWidth);
docElem.setAttribute('min-width', minWidth);
var scale = 1 / dpr,
content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';
if(viewportEl){
viewportEl.setAttribute('content',content);
}else{
viewportEl = document.createElement('meta');
viewportEl.setAttribute('name','viewport');
viewportEl.setAttribute('content',content);
document.head.appendChild(viewportEl);
}
setRemUnit();
window.addEventListener('resize',setRemUnit);
function setRemUnit(){
var viewWidth = docElem.clientWidth || docElem.getBoundingClientRect().width ||window.innerWidth;
var ratio = 18.75;
//console.log(viewWidth);
if (maxWidth && (viewWidth / dpr > maxWidth)) {
viewWidth = maxWidth * dpr;
} else if (minWidth && (viewWidth / dpr < minWidth)) {
viewWidth = minWidth * dpr;
}
docElem.style.fontSize = viewWidth/ratio + 'px';
docElem.setAttribute('fontSize',viewWidth/ratio)
}
})();index.js
(function(){
var toggleBtn = document.querySelector('.toggle'),
toggleLayer = document.querySelector('.toggle-layer');
toggleBtn.addEventListener('click',showHide,false);
function showHide(){
if(!toggleLayer.getAttribute('show')){
toggleLayer.setAttribute('show','shown'); //true则要显示layer
}
if(toggleLayer.getAttribute('show') === 'shown'){
toggleLayer.classList.remove('hide');
toggleLayer.setAttribute('show','hidden');
}else if(toggleLayer.getAttribute('show') === 'hidden'){
toggleLayer.classList.add('hide');
toggleLayer.setAttribute('show','shown');
}
}
})();写回答
1回答
-
这是因为同学使用的是flex布局，当设置了第五屏幕的内容，但是没有规定大小的时候，内容的大小会根据第五屏的内容进行伸缩
希望可以帮到你！
0
相似问题
老师，报错是什么问题呢
回答 1
为什么真机测试和浏览器测试结果不一样
回答 1