用JS改变页面中b标签的样式啊 样式的等 ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@media screen and (max-width: 1000px) {
div {
color:lightblue;
}
}
@media screen and (max-width: 800px) {
div {
color:pink;
}
}
@media screen and (max-width: 600px) {
div {
color:purple;
}
}
</style>
</head>
<body>
<div class="dv">每天你和阳光都在</div>
<button>点我</button>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('button').on('click',function(){
$('.dv').css('color',"red");
})
</script>
</html>
至于为什么?原因在于,当用JS执行的时候 ,是在标签内加的样式,权限很大,而用媒体查询的时候,还是CSS的标签的权限,就是div的权限,很显然,权限不够,覆盖掉标签内的权限,所以当JS执行的时候,即使上面有媒体查询的样式还是不能生效的。
把上面的代码运行一下,F12就可以知道原因了。