为什么屏幕宽度变化页面样式没有变化呢
来源：7-2 作业题
米兰的小铁匠_feng
2018-03-25 14:53:54
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>imooc</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--area1-->
<div class="area1">
<header>
<div><a href="#">主页</a></div>
<div><a href="#">Web开发</a></div>
<div><a href="#">数据库</a></div>
<div><a href="#">大数据</a></div>
<div><a href="#">深度学习</a></div>
</header>
<div class="nav">
<div class="header" id="header">
<h2>imooc</h2>
<p onclick="">□</p>
</div>
<div class="nav-menu" id="nav-menu">
<a href="#">前端</a>
<a href="#">java</a>
<a href="#">ios</a>
<a href="#">Android</a>
<a href="#">php</a>
</div>
</div>
<section>
<div class="img">
<img src="img/1.png" />
<p>鞋子特大号</p>
</div>
<button>start</button>
</section>
</div>
<div class="area2">
<div><a href="#">关于鞋子特大号</a></div>
<div><a href="#">相关业务</a></div>
<div><a href="#">核心团队</a></div>
<div><a href="#">新增专题</a></div>
</div>
<div class="area3">
<div class="area3_content">
<p class="title">大数据</p>
<p>大数据（big data），指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。[1]
在维克托·迈尔-舍恩伯格及肯尼斯·库克耶编写的《大数据时代》[2] 中大数据指不用随机分析法（抽样调查）这样捷径，而采用所有数据进行分析处理。大数据的5V特点（IBM提出）：Volume（大量）、Velocity（高速）、Variety（多样）、Value（低价值密度）、Veracity（真实性）。</p>
</div>
</div>
<div class="area4">
<p>鞋子特大号</p>
<a href="#">welcome to www.bigshoes.com</a>
</div>
<div class="area5">
<p>芭蕾演出</p>
<div class="img">
<div><img src="img/1.jpg" /></div>
<div><img src="img/2.jpg" /></div>
<div><img src="img/3.jpg" /></div>
<div><img src="img/4.jpg" /></div>
<div><img src="img/5.jpg" /></div>
<div><img src="img/6.jpg" /></div>
</div>
</div>
<div class="area6">
Copyrigth©2017 bigshoes.com All Rights Reversed
</div>
<script src="js.js" type="text/javascript"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #757575;
}
body{
display: flex;
flex-direction: column;
}
/*area1*/
.area1{
width: 100%;
height: 600px;
background-color: #B2C5CC;
display: flex;
flex-flow: column;
align-items: center;
}
/*ipad*/
header{
width: 80%;
height: 100px;
padding: 0 10% 0 10%;
color: #757575;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
header a:hover{
color: pink;
transition: color 0.5s;
}
/*ihpone*/
.nav{
width: 100%;
height: 50px;
position: relative;
display: none;
}
.header{
display: flex;
justify-content: center;
align-items: center;
background: #7EA6B1;
}
h2{
line-height: 50px;
color: white;
}
.header p{
line-height: 50px;
color: white;
font-size: 30px;
margin-right: 20px;
position: absolute;
right: 0;
}
.nav-menu{
display: flex;
flex-direction: column;
}
.nav-menu a{
height: 30px;
line-height: 30px;
display: block;
border-bottom: 1px solid white;
align-items: center;
text-align: center;
background: #7EA6B1;
display: none;
}
section{
width: 100%;
height: 500px;
padding-top: 5%;
display: flex;
flex-flow: column;
align-items: center;
text-align: center;
}
section p{
margin-top: 20%;
color: white;
font-size: 25px;
}
section button{
width: 15%;
height: 50px;
margin-top: 60px;
color: #757575;
font-size: 30px;
border: none;
border-radius: 10px;
outline-style: none;
background: white;
}
section button:hover{
background: pink;
color: white;
transition: background-color 1s;
transition: color 0.5s;
}
/*area2*/
.area2{
width: 100%;
height: 80px;
color: #bababa;
display: flex;
justify-content: space-around;
align-items: center;
}
.area2 a:hover{
color: pink;
transition: color 0.5s;
}
/*area3*/
.area3{
width: 100%;
border-top: 1px solid lightgray;
}
.area3_content{
width: 50%;
height: 400px;
position: relative;
left: 25%;
line-height: 30px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
color: #bababa;
overflow: hidden;
}
.area3_content .title{
color: black;
font-size: 30px;
margin-bottom: 30px;
}
/*area4*/
.area4{
width: 86%;
padding: 2% 7% 2% 7%;
color: #757575;
display: flex;
justify-content: space-between;
background: gainsboro;
}
/*area5*/
.area5{
width: 100%;
padding-top: 30px;
padding-bottom: 30px;
background: linear-gradient(white,#bababa);
}
.area5 p{
width: 93%;
height: 50px;
line-height: 50px;
padding-left: 7%;
color: #757575;
}
.area5 .img{
width: 88%;
padding: 0 6%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.area5 .img div{
width: 32%;
height: 200px;
margin: 5px;
}
.area5 .img img{
width: 100%;
height: 100%;
}
.area5 .img div:hover{
transition: all 0.5s;
transform: scale(1.02);
}
/*area6*/
.area6{
width: 100%;
heihgt: 50px;
line-height: 50px;
text-align: center;
background: gainsboro;
}
/*响应设置*/
@media only screen and (min-device-width:375px) and (max-device-width: 667px){
.nav{
display: block;
}
header{
display: none;
}
.area4{
width: 86%;
padding: 2% 7% 2% 7%;
color: #757575;
display: flex;
flex-direction: column;
align-items: center;
background: gainsboro;
}
}
var header = document.getElementById("header");
var p = header.getElementsByTagName("p");
p.onclick=function(){
document.getElementById("nav-menu").getElementsByTagName("a").style.display = "block";
}写回答
1回答
-
小于飞飞
2018-03-26
注意两个概念：
1、max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。
2、max-width是目标显示区域的宽度，例如，浏览器宽度。
结论：
如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。
通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。
动手实践下，将max-device-width 修改max-width ，或者在手模拟环境下观看，欢迎采纳，加油！
0
相似问题