关于CSS3 @media screen and(max-width:760px){}不起作用问题

最新推荐文章于 2024-05-31 09:06:51 发布

成遗憾

最新推荐文章于 2024-05-31 09:06:51 发布

阅读量1.2w

点赞数 6

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/CYHLLF/article/details/87861814

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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)”之间少打了一个空格。。。。郁闷死了，以后写代码得多注意格式的问题，不然要吃大亏。

成遗憾

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
5
评论
关于CSS3 @media screen and(max-width:760px){}不起作用问题

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1,
复制链接

扫一扫

专栏目录