用媒体查询改了html部份元素没反应

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mobile</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_568749_ck2gadniza1yvi.css">
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<!-- 头部 -->
<header class="header">
<span class="address">北京</span>
<input type="text">
<span class="icon"><i class="iconfont icon-duihaoqipao2"></i></span>
</header>
<!-- banner -->
<section class="banner-box">
<div class="banner">
<img src="img/banner1.jpg">
<img src="img/banner2.jpg">
<img src="img/banner3.jpg">
<img src="img/banner4.jpg">
<img src="img/banner1.jpg">
</div>
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</section>
<!-- 导航 -->
<nav class="items">
<div class="item">
<img src="img/1.png">
<span>HTML</span>
</div>
<div class="item">
<img src="img/2.png">
<span>PHP</span>
</div>
<div class="item">
<img src="img/3.png">
<span>Android</span>
</div>
<div class="item">
<img src="img/4.png">
<span>Mysql</span>
</div>
<div class="item">
<img src="img/5.png">
<span>Java</span>
</div>
</nav>
<!-- 标题栏 -->
<section class="title">
<span class="lesson">精品课程</span>
<a href="##">查看全部></a>
</section>
<article class="lesson-box">
<div class="lesson">
<img src="http://szimg.mukewang.com/5806de7c00014a3105400300-360-202.jpg">
<div class="message">
<p>Jquery实战课程</p>
<p>老师：小小小</p>
<p><i class="iconfont icon-weixin"></i>微信：fcsboy</p>
<p><i class="iconfont icon-shizhong"></i>时间：3点半</p>
</div>
<div class="price">8<small>折</small></div>
</div>
<div class="lesson">
<img src="http://szimg.mukewang.com/583e42fb0001e04f05400300-360-202.jpg">
<div class="message">
<p>微信小程序</p>
<p>老师：小小小</p>
<p><i class="iconfont icon-weixin"></i>微信：fcsboy</p>
<p><i class="iconfont icon-shizhong"></i>时间：3点半</p>
</div>
<div class="price">5<small>折</small></div>
</div>
<div class="lesson">
<img src="http://szimg.mukewang.com/57ec8a820001c60b05400300-360-202.jpg">
<div class="message">
<p>RN实战课程</p>
<p>老师：小小小</p>
<p><i class="iconfont icon-weixin"></i>微信：fcsboy</p>
<p><i class="iconfont icon-shizhong"></i>时间：3点半</p>
</div>
<div class="price">9<small>折</small></div>
</div>
<div class="lesson">
<img src="http://szimg.mukewang.com/576b84c10001b1c005400300-360-202.jpg">
<div class="message">
<p>响应式布局</p>
<p>老师：小小小</p>
<p><i class="iconfont icon-weixin"></i>微信：fcsboy</p>
<p><i class="iconfont icon-shizhong"></i>时间：3点半</p>
</div>
<div class="price">3<small>折</small></div>
</div>
</article>
<!-- 页脚 -->
<footer class="footer">
<div class="item active">
<i class="iconfont icon-wode"></i>
<span>我的</span>
</div>
<div class="item">
<i class="iconfont icon-xiangji-tianchong"></i>
<span>相机</span>
</div>
<div class="item">
<i class="iconfont icon-rili"></i>
<span>日历</span>
</div>
<div class="item">
<i class="iconfont icon-wode"></i>
<span>我的</span>
</div>
</footer>
<script src="js/js.js"></script>
</body>
</html>

css

*{
	padding:0;
	margin:0;
}
ul{
	list-style-type:none;
}
a{
	text-decoration:none;
}
input{
	border:none;
	outline: none;
}
html{
	font-size: 20px;
}
body{
	/*background:#f0f0f0;*/
}
/*头部*/
.header{
	display: flex;
	justify-content:space-between;
	align-items:center;
	height: 2.4rem;
	background:#ef1313;
	color: #fff;
	font-size:0.8rem;
}
.header>.address{
	display: inline-block;
	width: 4rem;
	text-align: center;
}
.header>input{
	display: block;
	width: 100%;
	height: 1.5rem;
	border-radius:0.4rem;
}
.header>.icon{
	display: inline-block;
	width: 4rem;
	text-align: center;
}
.header>.icon>.iconfont{
	font-size: 1rem;
}
/*banner*/
.banner-box{
	position: relative;
	width: 100%;
	overflow: hidden;
}
.banner{
	width: 93.8rem;
	overflow: hidden;
}
.banner>img{
	display: block;
	float: left;
	width: 18.75rem;
	height: 8rem
}
.dots{
	position:absolute;
	display: flex;
	justify-content:center;
	align-items: center;
	bottom: .5rem;
	width: 100%;
	height: 1rem;
	line-height: 1rem;
}
.dots>span{
	display: inline-block;
	margin:0 .1rem;
	width: .5rem;
	height: .5rem;
	background:#9aa499;
	border-radius: 50%;
}
.dots>span.active{
	background:#fff;
}
/*导航*/
.items{
	display: flex;
	flex-wrap:wrap;
	background:#fff;
}
.items>.item{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 25%;
	margin-top: .5rem;
}
.items>.item>img{
	width:2.5rem;
	height: 2.5rem;
	border-radius: 50%;
}
.items>.item>span{
	font-size: .5rem;
	margin-top: .3rem;
}
/*title*/
.title{
	display: flex;
	justify-content:space-between;
	align-items:center;
	padding:0 .4rem;
	height: 1.5rem;
	background:#f0f0f0;
	font-size: .7rem;
}
.title>.lesson{
	color: #999;
}
.title>a{
	color: #c9394a;
}
/*课程区*/
.lesson-box{
	position: relative;
	box-sizing: border-box;
	padding:0 1rem 0 1rem;
	background:#fff;
}
.lesson-box>.lesson{
	display: flex;
	justify-content: space-between;
	align-items:center;
	padding:1rem 2rem 1rem 0;
	border-bottom: 1px solid #ccc;
}
.lesson-box>.lesson>.message{
	position: absolute;
	left: 6.1rem;
	font-size: .6rem;
	color: #999;
}
.lesson-box>.lesson>.message>p:first-child{
	color: #000;
}
.lesson-box>.lesson>img{
	width: 4.3rem;
	align-self: flex-start;
}
.lesson-box>.lesson>.price{
	font-size: 2rem;
	color: #c9394a;
}
.lesson-box>.lesson>.price>small{
	font-size: .6rem;
}
.icon-weixin{
	color: #33b433;
}
/*页脚*/
.footer{
	display: flex;
	justify-content:space-around;
	margin-top: .8rem;
	padding:.4rem 0;
	border-top: 1px solid #ccc;
	background:#fff;
	font-size: .6rem;
}
.footer>div{
	display: flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
}
.footer>div.active{
	color: #c9394a;
}
@media screen and (min-width: 640px){
	html{
		font-size: 34.1px;
	}
	.header,
	.banner-box,
	.items,
	.title,
	.lesson-box{
		width: 32rem;
		margin:0 auto;
	}
}

(function(){
	var resizeEvent="orientationchange" in window ? "orientationchange":"resize";
	function recalc(){
		var clientWidth=document.documentElement.clientWidth;
		console.log(clientWidth)
		if(!clientWidth) return false;
		if(clientWidth>640){
			document.documentElement.style.fontSize="20px";
		}else if(clientWidth<=640){
			document.documentElement.style.fontSize=20*(clientWidth/375)+"px";
		}
	}
	window.addEventListener(resizeEvent,recalc,false);
	document.addEventListener("DOMContentLoaded",recalc,false);
})()

banner的图不会变化，不知道为什么

hunmix 2018-02-09

源自：项目：移动端课程列表页 7-1 items区域的布局

收起

1回答

好帮手慕糖回答被采纳获得+3积分 2018-02-11 10:29:42

你好，1、这里应该在模拟器的情况下查看。

2、要满足如下最小宽度640px这个条件。

3、如下图（图二），进行查看，媒体查询是可以生效的哦，但是（如下图一）由于“Style Attribute”这个默认的优先级较高，所以会应用默认的。建议:这里可以改变下优先级。如下图三：

图一：

图二：

图三：

祝学习愉快~

收起回答

hunmix 提问者 #1

请问一下“style attribute”是什么属性

2018-02-11 20:33:28
好帮手慕糖回复提问者 hunmix #2

你好，这是一种默认的样式属性，这里是继承与html的，可以理解为html的默认属性。祝学习愉快~

2018-02-12 09:31:58
hunmix 提问者 #3

非常感谢！

2018-02-12 14:06:55