<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<title>Title</title>
<style>
.aaa{
width: 300px;
height: 500px;
background-color: black;
}
@media screen and(max-width: 800px){
.aaa{
width: 100px;
background-color: red;
}
}
</style>
</head>
<body>
<div class="aaa"></div>
</body>
</html>
今天在写自适应网页的时候发现一个问题,@media screen and(max-width: 800px){}不起作用,无论怎么刷新网页改变浏览器大小,div的宽度大小和背景颜色就是不发生变化。
但是当把代码改成
@media (max-width: 800px){
.aaa{
width: 100px;
background-color: red;
}
}
是起作用的!感觉很奇怪,因为之前在菜鸟教程里查到“screen”的功能是
按照上面的意思不管是电脑浏览器还是手机打开网页,@media screen and(max-width: 800px){}是都起作用的。
。
。
。
。
刚刚在截图的时候突然发现错误的原因了!!原来是写的时候“and”和“(max-width: 800px)”之间少打了一个空格。。。。郁闷死了,以后写代码得多注意格式的问题,不然要吃大亏。